jQuery动画底部div

我尝试使用jQuery animate移动特定的div。但是，它不适用于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>

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

尝试在div上设置position: relative。

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

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

来动画化它。

相关内容

最新更新

热门标签：