jquery - Jquery淡入淡出在3个div之间旋转

Question

我正在尝试在 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，但是否可以将第三个 div 插入到旋转中？

我试过这样：

   $(window).load(function(){
var div1 = $("#apDiv1");
var div2 = $("#apDiv2");
var div3 = $("#apDiv3");

function fade() {
    div1.stop(true, true).fadeIn(2000);
    div2.stop(true, true).fadeOut(2000);
    div3.stop(true, true).fadeIn(2000);
    div1.stop(true, true).fadeOut(2000, 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(); })

但这只是跳过它/根本不起作用。

Answer 1

公平地说，如果您要使用两个以上的 div，我会重写该函数，以便它可以做任何数量，而不仅仅是三个 div

我假设你的 div 看起来像这样（我给了他们一个类，fade开始的一个有一个类current）

<div id="apDiv1" class="fade current"></div>
<div id="apDiv2" class="fade"></div>
<div id="apDiv3" class="fade"></div>

给定这种结构，您可以在您的 中使用以下 jquery window.load：

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();

例子

Answer 2

我的建议（可在http://jsfiddle.net/skjHN/上找到）：

function rotateFade() {
    var toFadeOut = $('[id^=apDiv].current');
    var toFadeIn = $('[id^=apDiv].current + [id^=apDiv]');
    toFadeIn = toFadeIn.length ? toFadeIn : $('[id^=apDiv]:first-child');

    toFadeOut.removeClass('current').fadeOut(2000);
    toFadeIn.addClass('current').fadeIn(2000);

    setTimeout(rotateFade, 1000);
}

// start the process
rotateFade();

Answer 3

你错过了第一个 div 的变化：

jsfiddle：http: //jsfiddle.net/M4ddY/4/

<script>
    $(window).load(function(){
        var div1 = $("#apDiv1");
        var div2 = $("#apDiv2");
        var div3 = $("#apDiv3");

    function fade() {
        div1.stop(true, true).fadeIn(2000);
        div2.stop(true, true).fadeOut(2000);
        div3.stop(true, true).fadeIn(2000, function() {
            // swap in/out
            var temp= div1;
            div1 = div2;
            div2 = div3;
            div3 = temp;
            // start over again
            setTimeout(fade, 1000);
           });
       }

       // start the process
       fade(); 
    });
</script>

Answer 4

修改您的代码将 div1 保存到 temp 变量。

var temp= div1;
        div1 = div2;
        div2 = div3;
        div3 = div1;
        div1 = temp;

谢谢，

湿婆

Answer 5

   $(function(){
      fade();
   });
      function fade() {
           div1.stop(true, true).fadeIn(2000, function(){
              $(this).fadeOut(2000);
              div2.stop(true, true).fadeIn(2000, function(){
                 $(this).fadeOut(2000);
                  div2.stop(true, true).fadeIn(2000, function(){
                       $(this).fadeOut(2000);
                       setTimeout(fade, 2000);
                   });
               });
            });
       }

---

您可以将该fade()函数从 doc ready 中移出，然后在 doc ready 中调用它。

---