。動畫jquery無法正常工作

Question

我正在使用.animate函數來爲另一個div內的div製作動畫效果。 它工作正常，在同一頁面的div的第一塊，但它並沒有在其他divs。

有關如何解決這個問題的任何想法？

這裏是的jsfiddle例如http://jsfiddle.net/atseros/CkaHG/2/

 $(document).ready(function() { 

    $("#displayscroll").hover(
    //on mouseover 
    function() { 
     $(this).animate({ 
     height: '+=170' 
     }, 'slow' 
    ); 
    }, 
    //on mouseout 
    function() { 
     $(this).animate({ 
     height: '-=170px' 
     }, 'slow' 
    ); 
    } 
); 

}); 

Answer 1

的變化ID的其他屬性。

的變化ID類樣品：

HTML：

<div id="displaybox"> 
    <div id="displayboximg"> 
<div class="displayscroll"> <!-- id to class --> 
<div style="margin-top:50px; margin-left:20px; font-weight:bolder;"></div> 
     </div> 
</div> 
<div id="displayboxdetails"> 
    details 
</div> 
</div> 
<div id="displaybox"> 
    <div id="displayboximg"> 
<div class="displayscroll"> <!-- id to class --> 
<div style="margin-top:50px; margin-left:20px; font-weight:bolder;"></div> 
     </div> 
</div> 
<div id="displayboxdetails"> 
    details 
</div> 
</div> 

腳本：

$("div.displayscroll").hover(// <---- change to class 
    //on mouseover 
    function() { 
     $(this).animate({ 
     height: '+=170' //adds 250px 
     }, 'slow' //sets animation speed to slow 
    ); 
    }, 
    //on mouseout 
    function() { 
     $(this).animate({ 
     height: '-=170px' //substracts 250px 
     }, 'slow' 
    ); 
    } 
); 

CSS：

.displayscroll { 
    height:30px; 
    overflow:hidden; 
    opacity:0.82; 
    position:absolute; 
    left:0px; 
    right:0px; 
    bottom:0; 
    text-align:justify; 
    background-color:#4e81bc; 
    }