html - .animate jquery 无法正常工作

Question

我正在使用 .animate 函数为另一个 div 中的 div 设置动画。它工作正常，在同一页面的第一个 div 块中，但在其他 div 中没有。

关于如何解决这个问题的任何想法？

这是 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;
    }