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的伟大工程，但它可以插入一个第三一个进入轮换？

我试着像这样：

$(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开始一个）您window.load内给予这个结构，你可以使用下面的jQuery

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

：

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

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> 

Answer 3

修改代码保存DIV1至临时变量。

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

感谢，

湿婆

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()功能和文档准备将其移出，并调用它在文档准备好代替。

---

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