div内部加载iframe淡入淡出效果

背景

最近在写一个小功能就是日志的查询功能,很快写完之后在翻动日志的时候总觉得的怪怪的,想了一会儿就是觉得它加载的太快了,看着就不nice,于是就想着在切换iframe内容的时候给一个平滑的过程,于是就开始了百度的过程。
刚开始想的是给一个翻书的效果,找了半天之后没有找到,基本都是PDF类型的,网上也有理论知识,但是身为代码粘贴师的骄傲,自己写是不可能的,我相信一定是我搜的姿势不对。于是乎我又想着做一个类似轮播那样的,因为这样的效果也挺好的,但是还是我的搜索功力不够,搜到的净是我用不到的博文然后给你转载个几百遍,有的还没有表明出处。
在轮播的最后一次尝试下,找到了animsition.js,它是不同网页之间的刷新效果,它给我提供了思路,于是就搜到了jquery的fadeIn()和fadeOut(),它们就满足了页面内容切换时的平滑效果,最后解决。
有时候不能对于一些事执念太重,达到结果就行,路不仅仅只有一条。

代码

        function loadSlow() {
            $("#需要淡入淡出的div的id").fadeOut();
            setTimeout('页面加载方法()',400);
            $("#需要淡入淡出的div的id").fadeIn();
            
        }
        function 页面加载方法() {
			***
        }

在途中遇到了淡入前页面已经加载了,因此我就让加载页面的方法延迟400毫秒加载,这样看着就很自然了。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值