jQuery淡入淡出旋转3个div之间。

Question

我正在尝试在三个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(); })

这在使用两个 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(); })

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

- Marius Prollak

---

你正在丢失/覆盖div1，因此当它被重新分配为3时，它回到了第二个！ =] 将div1保存为临时变量以便在末尾再次使用。 - MackieeE

这可能会有所帮助：http://stackoverflow.com/a/10194920/1823841 - palaѕн

http://jsfiddle.net/gJUPT/3/ - Anjith K P

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>

有了这个结构，你可以在 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();

示例

- Pete

Answer 2

你错过了第一个 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>

- radu florescu

---

它仍然只在2个div之间旋转，如果我像这样设置div顺序：`<div id="apDiv1"></div><div id="apDiv2"></div> <div id="apDiv3"></div> 我可以在更改之间看到apdiv1一瞬间的出现，如果我将其设置为最后一个，则只在apdiv2和apdiv3`之间旋转，有什么想法吗？ - Marius Prollak

我不明白，我可以看到你的fiddle正在工作，我已经按照完全相同的顺序设置了它，但仍然跳过了一个更改（apDiv1-我只能看到它一瞬间）。 - Marius Prollak

尝试复制粘贴我提供的代码。因为我稍微编辑了一下。 - radu florescu

我已经从fiddle中选取了一个。似乎只有apDiv3在整个第二个位置上保持不变，其他的都很奇怪，apDiv2可能只有半秒钟，apDiv1在切换到apDiv3之前几乎看不见。 - Marius Prollak

Answer 3

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

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

谢谢，

Siva

- SivaRajini

Answer 4

   $(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 中调用它。

---

- Jai

Answer 5

我的建议（在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();

- Arkadiusz Cieśliński