I am running this animation on $(window).scroll() and it works fine for the most part.
$('#el').animate({ left: toMove }, 500);
The problem is if the user scrolls too fast, two animations will fire and the second animation will fire before the first one has moved far enough. How can I make sure there is only one animation at any given time and then the other animations will follow? I need the element to animate left FULLY any other animations run but I need them all to run. I tried using .queue() but couldn't find the right solution with it.
You could use the stop function like this to smooth things up:
$('#el').stop(true, false).animate({ left: toMove }, 500);
The stop function, when calling like that will clear the animation queue for any waiting animation, as well as stop the current animation if any.
Edit
If you want the animation to end before animating again you just need to call .stop(true, true) instead
Related
I have a bouncing arrow on my website that I created with Jquery and setInterval, like this:
bouncing = setInterval(function() {
$("div").animate({
top:"30px"
},100,"easeInCubic",function() {
$("div").animate({
top:"0px"
},100,"easeOutCubic");
});
console.log("bounced");
},200);
You can see this in place in a codepen here: http://codepen.io/mcheah/pen/wMmowr
I made it run faster than i needed because its easier to see the issues quicker. My issue is that after leaving the interval running for a few seconds, you'll notice that instead of bouncing back up or down immediately, the bouncing element will stop for half a second and then just hang there, before beginning again. If you leave it running even longer (20 seconds) and then clear the interval, you'll notice that it takes a few seconds to stop bouncing.
My questions are these:
Why does the bouncing go out of sync occasionally?
Why does the clear interval take a while to clear if it's been repeating for a while?
Is there a better way to have a bouncing arrow? Are CSS transitions more reliable?
Thanks for your help!
Your are trying to perfectly coordinate a setInterval() timer and two jQuery animations such that the two come out perfectly coordinated. This is asking for trouble and the two may drift apart over time so it is considered a poor design pattern.
If, instead, you just use the completion of the second animation to restart the first and make your repeat like that, then you have perfect coordination every time.
You can see that here in another version of your codepen: http://codepen.io/anon/pen/NxYeyd
function run() {
var self = $("div");
if (self.data("stop")) return;
self.animate({top:"30px"},100, "easeInCubic")
.animate({top:"0px"}, 100, "easeOutCubic", run);
}
run();
$("div").click(function() {
// toggle animation
var self = $(this);
// invert setting to start/stop
self.data("stop", !self.data("stop"));
run();
console.log("toggled bouncing");
});
It's not a good idea to mix animate() with timers this way. There's NO chance you can synchronize something like this. And there's no need to. You can simply append a function into the animation queue, look here: https://stackoverflow.com/a/11764283/3227403
What animate() does is put an animation request into a job queue which will be processed later, when the right time comes. When you break the interval the stuff that accumulated in the queue will still be processed. There's a method to clear the queue and stop all animation immediately.
The JQuery animation functions actually manipulate CSS, and there is nothing beyond it in HTML. Another option would be using a canvas, but it is a completely different approach and I wouldn't recommend it. With JQuery's animation your already at the best choice.
This is a simple solution to your problem:
function bounce()
{
$("div")
.animate({
top: "30px"
}, 100, "easeInCubic")
.animate({
top: "0px"
}, 100, "easeOutCubic", bounce); // this loops the animation
}
Start bouncing on page load with:
$(bounce);
Stop bouncing on click with:
$("div").click(function() {
$("div").stop().clearQueue().css({ top: "0px" });
// you want to reset the style because it can stop midway
});
EDIT: there were some inaccuracies I corrected now. The running example is on codepen now.
If you want to use javascript for animation you can use something better like the greensock tween library
http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/
something like this:
var tween = TweenMax.to($("div"), 100, {y: "100px", yoyo: true, repeat: -1});
You could wrap your interval code with:
if(!$("div").is(":animated"))
This will initiate your animation only if your previous one is finished.
The reason why it was bouncing weird is that your animations are queued.
You can check how it works now:
http://codepen.io/luminaxster/pen/XKzLBg
I would recommend using the complete callback when the second animation ends instead and have variable to control a bounce recursive call in this version:
http://codepen.io/luminaxster/pen/qNVzLY
I am trying to have this navigation sidebar that slides away some time after the mouse leaves, making the text-part expand. The thing is, that whenever the sliding function starts, the page jumps to the top. There's no "#" used, I tried overflow-y: scroll, return false at the end of the function, preventDefault, but nothing works.
Here's the js code
$(document).ready(function(){
$("#navbar").delay(5000).animate({left: "-=15%"});
$("#navwrap").css("width","2%").css("position","fixed");
$("#bodywrap").delay(5000).animate({width: "90%"});
$("#navbar").mouseleave(function(){
$(this).stop(true, true).delay(3000).animate({left: "-=15%"});
$("#bodywrap").delay(3000).animate({width: "90%"});
$("#navwrap").css("width","2%").css("position","fixed");
});
$("#navwrap").mouseenter(function(){
$("#navbar").stop(true,false);
$("#bodywrap").stop(true,false);
if ($("#navbar").css("left") != "0%"){
$("#navbar").animate({left: "0%"});
$(this).css("width","15%").css("position","initial");
$("#bodywrap").animate({width: "75%"});
};
});
});
And here's the fiddle: http://jsfiddle.net/uuw2dzry/1/
Much of the animations and delays can be done by CSS
http://jsfiddle.net/fkL57v9d/
Your code is overly complicated and leaves room for bugs and undesired results. I'd consider re-creating this page in a simpler way.
I got a problem with smooth fadeIn and fadeOut in mousemove... I am doing some calculations about what is under top element, and based on those calculations I would like to fadeIn() or fadeOut() tooltip. The problem is that when moving a mouse, events are being shoot like every few milliseconds.
The sitiuation looks like this:
I move the mouse, tooltip is hidden. Suddenly mouse pointer is on top of element that should trigger fadeIn(), but this element is not the triggerer, because it is behind of some other element. So I need to shoot fadeIn() from mousemove. But, when I shoot it, every few milliseconds, it doesn't work, or works million times. But generally, it does not... animation simply stucks as long as I move mouse, because fadeIn() is being called all over again. I am really tired of this, tried to fix it for like 5 hours and nothing.
I've tried:
.stop() before fadeIn() / fadeOut() in different configurations... but the only visible effect I got was that it looked like show(), because stop(true,true) simply deletes the queue and leads to the end of last animation. So, wow! It is show... how... eghn... great :/
Using :visibe selector to fadeOut() and :not(:visible) to fadeIn() ... well.. that of course did not change much, an with stop() it was just leaving semitransparent tooltip
Using rel attribute to define that the fadeOut() was already shoot and should not be shoot anymore... even worse idea, because it simply did not come back after total fadeOut()
To get some reset and thing, but I can't rest when I don't have this problem resolved - it is sooo annoying!
I wonder if anybody reads this anyway... I wouldn't.
So HOW to limit fadeOut(), fadeIn() events to one each time so it would smoothly fadeIn and fadeOut even from middle of animation when event is triggered by mousemove?
I will probably get -1000 for this question... doooh.
I'd suggest you use css for this instead. You lose a bit of compatibility (Most notably older IE's), but it's simpler and will run a lot smoother.
E.g. define opacity in a :hover pseudo class, and then define a transition property with a timing of your choice.
Edit:
Using css in this case has no use because as I said, the event is not trigered by top most layer... stop(true,true) works exactly te same as show() because it is called every few milliseconds, and once is enough to stop fade effect.
In that case, set/unset a class on the fading-element inside your event handler. Let css do the work for you.
E.g.:
<style>
#tooltip { opacity:0 ; transition:opacity 1s linear }
#tooltip.enabled { opacity:1 }
</style>
<div class="has-tooltip">Foo</div>
<div id="tooltip">Tooltip</div>
<script>
$(".has-tooltip")
.on("mouseenter", function() { $("#tooltip").addClass("enabled") })
.on("mouseleave", function() { $("#tooltip").removeClass("enabled") })
</script>
You can try to unbind events before FadeIn/fadeOut and bind again after animation is complete (in complete function).
try this, call this function on mouse move
TIMER='';
function onmove()
{
if(TIMER)
clearTimeout(TIMER);
else
TIMER = setTimeout(function(){
// use yor code here eg. $('whteverID').fadeIn();
},10)
}
I got a div with an image inside it using query
$('#super').animate({
left:'150px'
}, {
duration: 10000,});
What iam trying to figure out is how to stop and start animation. So for example it will start to move left 150px and then will stop for 2 seconds and then move left 300px.
Like this:
$('#super').animate({left : '-=150'}).delay(2000).animate({left : '-=300'});
Demo: http://jsfiddle.net/E7akr/
(You can add duration, easing and complete settings to the .animate() calls as desired - obviously the key thing here is the .delay() method.)
I have a little jQuery animation which fades in a link when hovering an :
$(function() {
$('.delete').hide();
$('#photos img').hover(function() {
$(this).parents('li').children('.delete').fadeIn('fast');
}, function() {
$(this).parents('li').children('.delete').fadeOut('fast');
});
});
But if I quickly move my mouse in and out of the image, the new animation is always added to the queue and when I stop I can see the link pulsating for a while. I tried using .stop(true), but then sometimes the fade in effect doesn't work at all (or just up to some opacity value less than 1). What can I do?
Thanks, Eric
The best way is to use hoverIntent plugin. This deals with the issues above. It also adds a slight delay to the animation so if a user happens to quickly move the mouse over all the links you do not get an ugly animation flow of all the links.
One way to prevent such problems occuring is to use stop() in conjunction with fadeTo(), as in the snippet below:
$(function() {
$('.delete').fadeTo(0, 0);
$('#photos img').hover(function() {
$(this).parents('li').children('.delete').stop().fadeTo('fast', 1);
}, function() {
$(this).parents('li').children('.delete').stop().fadeTo('fast', 0);
});
});
Hope this solves your issue!