Why is the animation duration of jquery's animate function inconsistent? -
please have @ these simple jquery animations:
animate.mouseenter(function () { animate.stop().animate({ opacity: 0 }, duration); }); animate.mouseleave(function () { animate.stop().animate({ opacity: 100 }, duration * 10); });
my questions:
- why animation time of these 2 animations more or less equal, although
duration
multiplied 10mouseleave
animation? - is there particular reason behavior?
- is factor 10 or other floating point value close 10?
here working fiddle: http://jsfiddle.net/tcmjd/3/
i added example of fadein
and fadeout
functions, equal duration
parameters yield equal animation times should be.
because opacity of 1
opaque. you're animating way 100, hits 1 pretty quickly.
var animate = $(".animate"), fade = $(".fade"), duration = 500; animate.mouseenter(function () { animate.stop().animate({ opacity: 0 }, duration); }); animate.mouseleave(function () { animate.stop().animate({ opacity: 1 }, duration * 10); }); fade.mouseenter(function () { fade.stop().fadeout(duration); }); fade.mouseleave(function () { fade.fadein(duration * 10); });
Comments
Post a Comment