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

.animate jquery无法正常工作

1 个答案: