每個div的jquery循環

Question

我想在一個頁面上製作多個（超過12個）幻燈片，這將在鼠標懸停時生成動畫。現在只有第一個div是動畫的。這裏是我的代碼：

jQuery: 

$(document).ready(function() { 
    $('#reference').each(function() { 
    $(this).cycle({ 
     speed:  200, 
     //timeout:  0, 
     fx:  'fade', 
    }); 
    }); 
}); 

HTML: 

<div class="columns-3"> 
    <div class="column firstCol"> 
     <div class="columns-3-Content"> 
      <div id="reference"> 
       <img src="images/img1.png" /> 
       <img src="images/img2.png" /> 
      </div> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="columns-3-Content"> 
      <div id="reference"> 
       <img src="images/img1.png" /> 
       <img src="images/img2.png" /> 
      </div> 
     </div> 
    </div> 
    <div class="column lastCol"> 
     <div class="columns-3-Content"> 
      <div id="reference"> 
       <img src="images/img1.png" /> 
       <img src="images/img2.png" /> 
      </div> 
     </div> 
    </div> 
</div> 
<div style="clear:both;"></div> 

在此先感謝！

Answer 1

你應該傳遞一個類而不是唯一的div ID。 jQuery的：

$(document).ready(function() { 
    $('.reference').each(function() { 
    $(this).cycle({ 
     speed:  200, 
     //timeout:  0, 
     fx:  'fade', 
    }); 
    }); 
}); 

編輯（通過並感謝傑拉德施耐德:)）：

你也可以這樣做：

$('.reference').cycle({ speed: 200, fx: 'fade' }); 

HTML：

<div class="columns-3"> 
    <div class="column firstCol"> 
     <div class="columns-3-Content"> 
      <div class="reference"> 
       <img src="images/img1.png" /> 
       <img src="images/img2.png" /> 
      </div> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="columns-3-Content"> 
      <div class="reference"> 
       <img src="images/img1.png" /> 
       <img src="images/img2.png" /> 
      </div> 
     </div> 
    </div> 
    <div class="column lastCol"> 
     <div class="columns-3-Content"> 
      <div class="reference"> 
       <img src="images/img1.png" /> 
        <img src="images/img2.png" /> 
      </div> 
      </div> 
     </div> 
    </div> 
    <div style="clear:both;"></div>