本文主要是介绍div内部加载iframe淡入淡出效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
背景
最近在写一个小功能就是日志的查询功能,很快写完之后在翻动日志的时候总觉得的怪怪的,想了一会儿就是觉得它加载的太快了,看着就不nice,于是就想着在切换iframe内容的时候给一个平滑的过程,于是就开始了百度的过程。
刚开始想的是给一个翻书的效果,找了半天之后没有找到,基本都是PDF类型的,网上也有理论知识,但是身为代码粘贴师的骄傲,自己写是不可能的,我相信一定是我搜的姿势不对。于是乎我又想着做一个类似轮播那样的,因为这样的效果也挺好的,但是还是我的搜索功力不够,搜到的净是我用不到的博文然后给你转载个几百遍,有的还没有表明出处。
在轮播的最后一次尝试下,找到了animsition.js,它是不同网页之间的刷新效果,它给我提供了思路,于是就搜到了jquery的fadeIn()和fadeOut(),它们就满足了页面内容切换时的平滑效果,最后解决。
有时候不能对于一些事执念太重,达到结果就行,路不仅仅只有一条。
代码
function loadSlow() {$("#需要淡入淡出的div的id").fadeOut();setTimeout('页面加载方法()',400);$("#需要淡入淡出的div的id").fadeIn();}function 页面加载方法() {***}
在途中遇到了淡入前页面已经加载了,因此我就让加载页面的方法延迟400毫秒加载,这样看着就很自然了。
这篇关于div内部加载iframe淡入淡出效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!