Menu
Here's a simple test case for animating a Div using absolute positioning and jQuery.
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
<script type='text/javascript'>
function slide(){
$('#box').animate({'left': 0},3000);
}
</script>
</head>
<body>
<button onclick="slide()">slide</button>
<div id="box" style="position: absolute; width: 120px; height: 100px; background: #ff0000; left: 500px"></div>
</body>
In Firefox 4 (on mac) the animation 'tears' and is very stuttery. In Safari and Chrome it is better, but still has visible juddering.
Having simplified the problem down to the above test case, I'm not really sure where to go next. Is this a jQuery bug? Am I missing something with the absolute positioning that would cause the browser to redraw loads? Would be incredibly grateful if some people could try the code above and have a think.... even if its only to reassure me that I'm not going mad :)
317
why using onclick="slide()" if u want to slide on click of button then do following
#box {
position: absolute;
width: 120px;
height: 100px;
background: #ff0000;
left: 500px;
}
<button id="slide">slide</button>
<div id="box">whetever</div>
<script type='text/javascript'>
$(document).ready(function (){
$('button#slide').click(function(){
$('#box').animate({'left': 0},3000);
});
});
</script>
Smoother Animations
Additionally jQuery is now using the new requestAnimationFrame method provided by browsers to make our animations even smoother. We can use this functionality to avoid calling timers and instead depend upon the browser to provide the best possible animation experience.
.promise()
Just like $.ajax() before it, $.animate() gets “deferred”. jQuery objects can now return a Promise to observe when all animations on a collection have completed:
$(".elements").fadeOut();
$.when( $(".elements") ).done(function( elements ) {
// all elements faded out
});
HAPPY TO HELP :)
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
