[英]Delay jQuery animation until the background image is displayed by Supersized plugin
人们之前也曾问过类似的问题,但我的观点有所不同:
我正在使用Supersized jQuery插件加载单个全屏背景图像。 加载图像的代码是这样的:
<script type="text/javascript">
jQuery(document).ready(function($) {
$.supersized({
//Background image
slides : [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]
});
$('#content').delay(3500).fadeIn(600);
});
</script>
如您在代码中所看到的,我在“超大”功能之后链接了fadeIn效果。 我想在背景图像(bg.jpg)结束后淡入#content div中,不仅完成加载,而且还完成淡入。我使用了我不太喜欢的解决方案:在我的fadeIn效果之前设置一个较长的延迟。
在超大尺寸图像消失后,在内容div中淡入淡出的最佳方法是什么?
感谢您的帮助!
如果有人仍在寻找解决方案,这就是我所做的:
超大3.2.7.js
在img.load函数之后,在base._start函数中,我添加了以下内容:
img.fadeOut();
img.bind("load", function () { $(this).fadeIn(750); });
找到了我自己的答案:
解决方案是编辑超大型核心js文件。 在文件中,执行以下代码:
$('#supersized-loader').hide(); //Hide loading animation
element.fadeIn('fast'); //Fade in background
resizenow();
我添加了自己的一行:
$('#content').delay('fast').fadeIn('fast');
像魔术一样工作!
您是否尝试过使用jQuery .ready()函数?
jQuery(document).ready(function($) {
$.supersized({
//Background image
slides : [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]
});
$.supersized.ready( function() {
$('#content').fadeIn(600);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.