。动画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; 
    }