我正试图在3个div之间淡出旋转,当前代码:
$(window).load(function(){ var div1 = $("#apDiv1"); var div2 = $("#apDiv2"); function fade() { div1.stop(true,true).fadeIn(2000); div2.stop(true,true).fadeOut(2000,function() { // swap in/out var temp = div1; div1 = div2; div2 = temp; // start over again setTimeout(fade,1000); }); } // start the process fade(); })
这适用于2个div,但是可以在旋转中插入第3个吗?
我试过这样:
$(window).load(function(){ var div1 = $("#apDiv1"); var div2 = $("#apDiv2"); var div3 = $("#apDiv3"); function fade() { div1.stop(true,true).fadeOut(2000); div3.stop(true,true).fadeIn(2000); div1.stop(true,function() { // swap in/out var temp = div1 div1 = div2; div2 = div3; div3 = div1; div1 = temp // start over again setTimeout(fade,1000); }); } // start the process fade(); })
但这只是跳过它/根本不起作用.
解决方法
为了公平,如果你要使用两个以上的div我会重写那个函数,所以它会做任何数量,而不只是三个div
我假设你的div看起来像这样(我给了他们一类淡入淡出,起始的有一类当前的)
<div id="apDiv1" class="fade current"></div> <div id="apDiv2" class="fade"></div> <div id="apDiv3" class="fade"></div>
给定此结构,您可以在window.load中使用以下jquery:
var divs = $('.fade'); function fade() { var current = $('.current'); var currentIndex = divs.index(current),nextIndex = currentIndex + 1; if (nextIndex >= divs.length) { nextIndex = 0; } var next = divs.eq(nextIndex); next.stop().fadeIn(2000,function() { $(this).addClass('current'); }); current.stop().fadeOut(2000,function() { $(this).removeClass('current'); setTimeout(fade,2500); }); } fade();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。