Question

我尝试使用jQuery div移动特定的animate。但是，它不适用于div，但适用于img。这是我的代码（它不起作用）：

<body>
<script type="text/javascript">
$(document).ready(function() {
    $('#clickme').hover(function() {
      $('#lol').animate({
        bottom: '+=100',
        left: '+=100'
      }, 5000, function() {
        // Animation complete.
      });
    });
});
</script>
<div id="clickme">
  Click here
</div>
<div id="lol" style="width: 500px; border: 1px solid #000; display: block;">aaaaaa</div>
</body>

但是这一个会起作用：

<body>
<script type="text/javascript">
$(document).ready(function() {
    $('#clickme').hover(function() {
      $('#book').animate({
        bottom: '+=100',
        left: '+=100'
      }, 5000, function() {
        // Animation complete.
      });
    });
});
</script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://img.labnol.org/images/2008/03/firefox-google-logo.jpg" alt="" width="266" height="113"
  style="position: relative; left: 10px;" />

</body>

Answer 1

使div的位置为绝对或相对;

Answer 2

尝试在DIV上设置position: relative。

默认值为static，不允许您操纵top和left属性。

Answer 3

你的div应该是绝对的还是相对的如果你不想改变它的css定位，你可以尝试使用css margin prop来设置它的动画

jQuery动画底部div

3 个答案: