I need to stop the animation and instantly complete all pending animations.
stop doesn't work:
Lets say I have animation that moves element that is on 0px by 100px and I use stop when it moved only 50px. The result will be an element at 50px. The result I want is when I interrupt the animation, even if the element is at 50px it will instantly jump to 100px.
How do I do that?
$.fn.stop() has the option to clear the queue and to jump to the end.
Just do something like: $('#foo').stop(true, true);
found this at http://forum.jquery.com/topic/stop-true-true-animation-chains-and-callbacks
(function($){
$.fn.extend({
hardStop: function(){
return this.each(function(){
var e = $(this);
while (e.queue().length){
e.stop(false, true);
}
});
}
});
})(jQuery);
use it by
$("#element").hardStop();
If that doesn't work, maybe change your original code to:
$("#abc").stop().animate(...
Specify manually the last state, don't be lazy. Im sure you can do it :)
$('#foo').stop(true, true);
$('#foo').css({x, '100px'});
Related
this is probably a very basic question, but I am trying to animate an image (with a kind of pulse effect) when a button is hovered over.
So far I have this:
$("#austriaBtn").mouseenter(
function animate(){
$('#austria').animate({width:"35", top:"-=4", left:"-=4"},600);
$('#austria').animate({width:"27", top:"+=4", left:"+=4"},600, animate);
}
);
Now, I can hover over the button (austriaBtn) and the image (austria) starts to pulsate, however, when I take the mouse off, it carries on pulsating. How can I stop it?
I know it must be something to do with stop(), but whenever I try to put it in, the animation stops working all together.
Thanks in advance!
Put .stop() in a .mouseleave() function.
$("#austriaBtn").mouseleave(function(){ $('#austria').stop(true,true); });
The true arguments in .stop() are as follows:
clear animation queue (default is false; shouldn't be an issue.)
jump to end of animation (default is false; stops the element from being caught in the middle of an animation. important here.)
You have to use the corresponding mouseleave event, thus catching the event when the mouse leaves the button and then stop the animation.
$("#austriaBtn").mouseleave(
function() {
$("#austria").stop();
}
);
you could use a lock variable:
var stopAnimation = false;
$("#austriaBtn").mouseenter(
function animate(){
if(stopAnimation){
stopAnimation = false;
} else {
$('#austria').animate({width:"35", top:"-=4", left:"-=4"},600);
$('#austria').animate({width:"27", top:"+=4", left:"+=4"},600, animate);
}
}
);
$("#austriaBtn").mouseleave(
function(){
$('#austria').stop();
stopAnimation = true;
}
);
Hi I have 4 windows 8 style live tiles on my web page each of them are infinitely looping to animate sliding up and down. I can get this to work well using a method that calls itself. However I want to pause this animation once the user clicks on one of the tiles. Once a tile is clicked it expands to the full size of the page but the animation continues when I want it to stop. I have tried implementing the stop() function to no avail. I have tried stop(true, true); to no avail. I have tried putting in a "sleep" method that puts the animation delay rate very high(to a stop) and thus putting the animation "to sleep" but it is unreliable getting it to stop on the right slide for some reason. If the stop method does work it only briefly works and the tiles all become out of sync and break I have also tried a boolean check i.e. if clicked stop but still no luck. Does anyone have any suggestions? thanks.
Here is some sample code:
function tiles()
{
setTimeout(function(){alltiles(news1,news2);},4000);
this method gets called on startup and the tile starts animating via alltiles(); after 4 seconds.
This is where the animation gets done I have included a callback function so each animation
starts when the last one has completed. Then the alltiles(); method gets called again to infinitely loop the animation.
function alltiles(div1, div2){
$(div1).delay(delayRate).animate({top: "-100%"}, speed, easing,
function(){});
$(div2).delay(delayRate).animate({top: "0"}, speed, easing,
function(){});
$(div1).delay(delayRate).animate({top: "0"}, speed, easing,
function(){});
$(div2).delay(delayRate).animate({top: "100%"},speed,easing,function(){
alltiles(div1, div2);});
Finally just a sample of where I am implementing the mouse down. I have tried unique ids also with no luck.
$('.tile,.tile2, .tile3, .tile4').mousedown(function(event) {
$('.tile,.tile2, .tile3, .tile4').stop();
$(this).addClass('selected');
$(".tile, .tile2, .tile3, .tile4").not(this).fadeOut(100);
$(this).delay(2000).animate({ width: "98%",height: "98%" }, 1000 );
If you're starting the whole thing with this:
alltiles(news1,news2);
which then proceeds to do animation operations on news1 and news2, then, you need to stop it with this:
$(news1).stop(true);
$(news2).stop(true);
Passing the true argument with .stop(true) clears the animation queue for that particular object so any queued up operations are stopped too.
To put it in your click handler:
$('.tile, .tile2, .tile3, .tile4').mousedown(function(event) {
$(news1).stop(true);
$(news2).stop(true);
$(this).addClass('selected');
$(".tile, .tile2, .tile3, .tile4").not(this).fadeOut(100);
$(this).delay(2000).animate({width: "98%", height: "98%"}, 1000 );
});
Say if you have a button with id="theStopButton". If a user clicks on it, it will stop ALL animations on the page with $.fx.off = true.
$('#theStopButton').click(function() {
$.fx.off = true;
});
http://api.jquery.com/jquery.fx.off/
Try adding the necessary boolean values
http://api.jquery.com/stop/
.stop( true, true )
OR
.stop(true)
Ok simple question for scrollTo. I'm looking for a way to prevent the queuing of the scroll animations. I've tried to work in stop() but it doesn't seem to do the trick.. any Ideas? here's the code...
('#nav_hold li a').click(function(){
$currLoc = $(this).attr('href');
$newLoc = $currLoc.replace('#!','');
$newLoc = "#"+$newLoc;
$(window).scrollTo($newLoc, 1000);
});
here's the site FYI http://www.dudnyk.com/files/connector/
I've had the same problem, but I found the solution here http://usejquery.com/sites/contrast-rebellion
Just use the line
jQuery.scrollTo.window().queue([]).stop(); before any new scrollTo.
There is function clearQueue(). I think that should help.
.stop() Is for removing the currently running animation, to also clear to queue use .stop(true)
$('#about').click(function() {
$(this).stop(true);
$.scrollTo('#about', 1000);
});
From jQuery Docs (linked above):
If more than one animation method is called on the same element, the
later animations are placed in the effects queue for the element.
These animations will not begin until the first one completes. When
.stop() is called, the next animation in the queue begins immediately.
If the clearQueue parameter is provided with a value of true, then the
rest of the animations in the queue are removed and never run.
{ queue : false }
as the scrollTo option
but that's the default. doesn't the anchor click get you somewhere?
When you use $.scrollTo on any element it is actually scrolling(with animation) the document until the scroll reaches to the specified element. So I believe we should stop the animation on document. Try this
$('#about').click(function() {
$(window).stop();
$.scrollTo('#about', 1000);
});
I have a script that I am developing that creates a sliding button type effect. Five div's are situated next to eachother each with a link. When one of those DIVS are clicked on the associated content is expanded and the rest of the Div's are closed.
The problem is, if a user clicks the Div twice while it loads or clicks another Div in rapid succession, cracks start to show.
I am wondering if it would be possible to only allow the query to be executed once and wait until completion rather than queuing it.
Here is my current code, if it is crap feel free to comment on how I could better it... I am not the best at Javascript/jQuery :P
function mnuClick(x){
//Reset all elements
if($('#'+x).width()!=369){
$('.menu .menu_Graphic').fadeOut(300);
$('.menu_left .menu_Graphic').fadeOut(300);
$('.menu_right .menu_Graphic').fadeOut(300);
$('.menu').animate({width: "76px"},500);
$('.menu_left').animate({width: "76px"},500);
$('.menu_right').animate({width: "76px"},500);
}
var ElementId = '#' + x;
$(ElementId).animate({
width: 369 + "px"
},500, function(){
$(ElementId + ' .menu_Graphic').fadeIn(300);
});
}
Thanks in advance,
Chris.
You need a "isRunning" flag. Check for it before you start. Set it when you start the sequence, clear it when it ends.
(function() {
var mutex = false;
function mnuClick(x){
if (!mutex) {
mutex = !mutex;
/* all code here ... */
mutex = !mutex; /* this statement should go into animation callback */
}
}
})();
mantain a state through a variable so you cannot click more than once until code has fully executed
you can unplug the onClick event handler (mnuClick) when the event starts, to effectively disable invoking the mnuClick twice, but be sure to restore it when the event ends.
Quick answer: use .addClass and .removeClass and test for the existence of the class at execution time. Test if it's set and return, or add it, execute the code, then remove it.
you can create an invisible maskin and maskout ( like the background in lightbox etc ) or disable clicks until the animation finishes.
I have the following jQuery code
$("#dropdown").hover(function() {
$(this).stop(true,true).fadeTo('fast',1);
$("#options").stop(true,true).slideDown();
}, function() {
$(this).delay(1000).stop(true,true).fadeTo('fast',0.1);
$("#options").delay(1000).stop(true,true).slideUp();
}
);
What I expect to happen is when the mouse leaves #dropdown it will wait 1 second before continuing. This is not happening.
What I am trying to achieve, in case there is a better way, is to leave the drop down menu visible for a second or two after moving your mouse and I would also like to prevent the events from happening again to prevent artifacts and "funnies" if you were to move the mouse over and out from the div very quickly
The problem is .stop(). If you take that out it works:
http://jsfiddle.net/LZ8yt/
Your calls to stop aren't placed on the animation queue - they run immediately. I'm not sure whether you really need them in the "hover out" routine.
edit removed dumbness
You can always go lo-tech with setTimeout.
var dropDownElement = $(this);
setTimeout(function()
{
dropDownElement.fadeTo('fast', 0.1);
// Other Code
}, 1000);