jQuery animate bottom div
I try to mov开发者_开发问答e 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;
Try setting position: relative on your DIV.
The default is static which doesn't let you manipulate the top and left properties.
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
加载中,请稍侯......
精彩评论