淡出当前元素并使用相同的类淡入兄弟元素

Question

我有以下标记，由于我无法访问的服务器生成它而无法编辑。服务器使用类'contentBox'加载所有div，但它只显示第一个（其他三个添加了'display: none;'）。

我想添加一个ID为'switchButton'的div，这样当它被点击时它淡出第一个'contentBox'div，然后淡化第二个'contentBox'div等等（所以再次按下它，隐藏第二，显示第三个div。）

我需要它循环，所以如果按下4次，它会回到第一个框。

<div id="switchButton">Click Me</div>

    <div class="contentBox">Server side generated content</div>
    <div class="contentBox">Server side generated content</div>
    <div class="contentBox">Server side generated content</div>
    <div class="contentBox">Server side generated content</div>

Answer 1

的 LIVE DEMO

var c = 0;                          // counter
var n = $('.contentBox').length;    // number of elements

// now using " ++c % n " you can loop your elements
// targeting the EQuivalent one using .eq() method. (0 indexed)
// % is called "reminder" or Modulo (AKA Modulus)   


$('#switchButton').click(function(){ 
  $('.contentBox').stop().eq( ++c%n ).fadeTo(500,1).siblings('.contentBox').fadeTo(500,0); 
});

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators
http://api.jquery.com/siblings/
http://api.jquery.com/eq/
http://api.jquery.com/fadeto/

Modulo playground