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>
make position of the div absolute or relative;