Jquery淡入淡出在3个div之间旋转答案

【问题标题】：Jquery fade rotate between 3 divsJquery淡入淡出在3个div之间旋转
【发布时间】：2014-03-03 03:03:29
【问题描述】：

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

我试过这样：

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

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

【问题讨论】：

你正在丢失/覆盖div1，然后当它重新分配到 3 时，它又回到了第 2 位！ =] 将div1 保存为临时变量，以便在最后再次使用。
这可能会有所帮助：stackoverflow.com/a/10194920/1823841
jsfiddle.net/gJUPT/3

标签： jquery

【解决方案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();

Example

【讨论】：

【解决方案2】：

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

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

谢谢，

湿婆

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

它仍然只在 2 个 div 之间旋转，如果我这样设置 div 顺序：<div id="apDiv1"></div> <div id="apDiv2"></div> <div id="apDiv3"></div> 我可以看到 apdiv1 在更改之间的瞬间，如果我最后设置它，它只会在 @987654324 之间旋转@ 和 apdiv3，有什么想法吗？
好吧，我不明白，我可以看到你的小提琴正在工作，我已经按照完全相同的顺序设置它，但它仍然跳过一个更改（apDiv1 - 我可以看到它瞬间）
尝试复制粘贴我提供的代码。因为我稍微修改了一下
我从小提琴中拿走了那个。好像只有 apDiv3 真正停留了一秒，其他都很奇怪，apDiv2 可能是半秒，apDiv1 在变成 apDiv3 之前几乎看不到。

【解决方案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();

【讨论】：