All geek questions in one place

JQuery 'Choppy' Animation - A Simple Test Case

Here is 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 is “teardrops” and is very shy. On Safari and Chrome, this is better, but still has visible distortion.

Opposing the problem to the test described above, I'm not quite sure where to go next. Is this a jQuery bug? Am I missing something with absolute positioning that will overload the browser? It would be incredibly grateful if some people could try the code above and think ... even if only to reassure him that I will not lose my mind :)

+6
source share
1 answer

why use onclick="slide()" if you want a slide at the click of a button do the following

CSS

 #box { position: absolute; width: 120px; height: 100px; background: #ff0000; left: 500px; }

HTML (assign some identifier)

 <button id="slide">slide</button> <div id="box">whetever</div>

JQuery

 <script type='text/javascript'> $(document).ready(function (){ $('button#slide').click(function(){ $('#box').animate({'left': 0},3000); }); }); </script>

Working demo

UPDATE (from jQuery1.6 )

Smoother animations

Additionally, jQuery now uses the new requestAnimationFrame method provided by browsers to make animations even smoother. We can use this functionality to avoid calling timers and instead depend on the browser to provide the best possible animation.

 .promise()

Like $.ajax() before this, $.animate() gets $.animate() . JQuery objects can now return Promise for observation when all animations in the collection are complete:

 $(".elements").fadeOut(); $.when( $(".elements") ).done(function( elements ) { // all elements faded out });

HAPPY HELP :)

+1
source

Source: https://habr.com/ru/post/885960/

More articles:


All Articles