CODEWITHSUNDEEP
jquery
die
die

Reputation: 3

jQuery animate bottom div

I try to move a specific div using jQuery animate. However, It does not work for div, but it works for img. Here's my code (it doesn't work):

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

But this one, will work:

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

Upvotes: 0

Views: 3091

Answers (3)

gion_13
gion_13

Reputation: 41533

your div should be position either absolute or relative.
If you do not want to alter it's css positioning, you can try to animate it using the css margin prop

Upvotes: 0

Jens Roland
Jens Roland

Reputation: 27770

Try setting position: relative on your DIV.

The default is static which doesn't let you manipulate the top and left properties.

Upvotes: 0

Headshota
Headshota

Reputation: 21449

make position of the div absolute or relative;

Upvotes: 4

Related Questions