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