I have tried to prevent animation but I am still seeing the animation on the UI.
$(e.target).removeAttr('style').removeClass('notransition');
Is there any removeAttr callback?
Or do I have to do a dirty trick like timeout?
Unfortunately .removeAttr() doesn't provide a callback function, you have to use a .delay() with your custom time of delay combined with a .queue() method because the delay method operates only in jquery fx queues.
$(e.target).removeAttr('style').delay(100).queue( function(){
$(this).removeClass("notransition").dequeue(); });
Related
From what I understand using .stop() will prevent the callback functions to fire, right?
Unfortunately, it seems that this does not work in my current script:
newSubMenu.stop().slideToggle(250, function() {
newSubMenu.css('visibility', 'visible').addClass('open');
});
The animation now stops when double clicking, but newSubMenu still gets the class open and I cant figure out why.
The goal I am trying to achieve, is to NOT apply the class open until the animation is complete.
From the documentation:
When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. … Callback functions are not called.
Callback functions are called if the third argument to stop() is true.
In the code you provide, though, the callback will run because you're stopping already running animations, not the slideToggle() animation which has yet to run when stop() is called.
Here is a working example showing the callback being stopped.
.stop() can be used to stop currently running animations. Once the animation has been completed the callback will be executed. In order to stop the current animation and avoid the callback being called you need to do something like this;
newSubMenu.mouseover(function(){
newSubMenu.slideToggle(250, function(){
$(this).css('visibility', 'visible').addClass('open');
});
}).dblclick(function(){
// this will stop the execution of the .slideToggle animation
// whitch will prevent the callback from being executed
newSubMenu.stop();
});
jsFiddle example
To see why this happens, you have to understand, what toggle does.
Everytime you click, the slideToggle gets itself the information to slideDown or slideUp.
The conclusion is: everytime the toggle is complete, your function will be called and your newSubMenu gets the visibility:visible style, plus the class "open" if it doesn't exist.
Click-> Stop all animations on element -> toggle slide -> call/excecute function
jQuery has added an "always" callback in version 1.8:
always
Type: Function( Promise animation, Boolean jumpedToEnd )
A function to be called when the animation completes or stops without
completing (its Promise object is either resolved or rejected).
(version added: 1.8)
URL: http://api.jquery.com/animate/
This will be fired always, if an animation is regularly done or if you interupt it with stop().
I'm trying to trigger a delayed hover event:
$(".graphic").delay(500).trigger('mouseover').trigger('mouseout');
But the delay is being ignored.
Any ideas?
delay() only affects the animation queue, but trigger() is synchronous. You can use queue() to schedule a function triggering the events after the delay:
$(".graphic").delay(500).queue(function(next) {
$(this).trigger("mouseover").trigger("mouseout");
next();
});
The .delay() method is best for delaying between queued jQuery effects.
To delay the initial effect, use setTimeout() function. By the way, you could use mouseover() instead of trigger('mouseover')
setTimeout(function () {
$(".graphic").mouseover().mouseout();
}, 500);
The jQuery API says:
Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.
Maybe you can set a timer, that will trigger mouseover/out after 500 ms using Windows.setTimeout
is possible to add callback into prepend method? I need to wait until DOM is rebuild and then start fade animation.
$("body").prepend(div);
$(div).css({
'opacity': 1
});
The animation is made with CSS3 transitions, so I only need to wait for DOM ready and then change the CSS opacity..
Here is fiddle with my problem...
Here's an update: http://jsfiddle.net/8MFJQ/4/
prepend doesn't have a callback because the DOM is ready with the call. I'm using Jquery's fadeIn and fadeOut as well to achieve wider browser coverage.
If I'm not wrong you can do it like that $("body").append(div).css({'opacity': 1});. Or maybe you've to change the method for, like this $(div).appendTo('body').css({'opacity': 1});
Let's say I've called $element.fadeIn(200). 100 ms later, something happens on that page and I want to interrupt that fade and immediately fadeOut(). How can I do this?
If you call calling $element.fadeIn(200).fadeOut(0), the fadeOut() only happens after the fadeIn() has finished.
Also, is there a way I can examine $element to determine if a fadeIn() or fadeOut() is running? Does $element have any .data() member that changes?
stop() will only remove animations that are not executed yet.
use stop(true, true) to interrupt and remove the current animation too!
You will get smooth fadeIn/Out effect by clearing queue but not jumping to the end, using .stop(true,false), but please notice that as FadeIn can be interrupted this way, FadeOut can not. I reported it as a bug like years ago, but noone cared. FadeIn only works if the object is hidden. But there is workaround... use FadeTo instead - it works on hidden as well as partially faded objects:
$('.a').hover(function(){
$('.b').stop(true,false).fadeTo(3000,1); // <- fadeTo(), not FadeIn() (!!!)
},function(){
$('.b').stop(true,false).fadeOut(3000);
});
Here's how it works: http://jsfiddle.net/dJEmB/
AFAIK fadeIn and fadeOut run synchronously, so no, I do not think you can interrupt them while they are running. You would have to wait until it is done executing.
If you call the stop method on the element it will stop all animations. The reason the fadeOut call in your example isn't called until after fadeIn is because animations are executed in a queue-like fashion.
You can use the stop() function to interrupt any animation that takes place during that particular moment. Let me know if this works.
Its always a good practice to keep functions that deal with an animation etc inside the function's callback. You can tell if the fadeIn() has finished by doing your function from within its callback, like:
$element.fadeIn(200, function(){
//do callback
});
If that is not possible then you can declare a variable outside the function. Say, var elmFadeInRunning = false. Change it to true right before you call fadeIn and change it back to false in the callback of the fadeIn. That way you can know if its still running if elmFadeInRunning == true.
Another working example
<div id="fadediv">Yay, I like to fade</div>
<button id="stopdatfade" >Stop that fade!</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
(function($){
currentfade = $("#fadediv").fadeOut(5000).fadeIn(5000).fadeOut(5000).fadeIn(5000);
$('#stopdatfade').on('click', function () {
if (typeof currentfade !== 'undefined') {
currentfade.stop(true, true);
}
});
})(jQuery);
</script>
Adding .stop(true,true) prior to the fadeIn will interrupt any current animations and execute the fadeIn immediately.
$('.saved').stop(true, true).fadeIn().delay(400).fadeOut(4000);
Try taking animation out from queue.
$('...').fadeIn(200).dequeue().fadeOut(0);
http://api.jquery.com/queue/
http://api.jquery.com/dequeue/
I am using scriptaculous to perform a slidedown effect using the following code:
Effect.SlideDown('dom_element_id');
I then hide the button which initiates this effect using:
$('button_id').hide();
The issue is that the button is hidden before the animation effect is complete, I would like it to hide after the animation effect is complete. I could not find a callback parameter for Effect.SlideDown.
You can pass the afterFinish option to pass a callback to be run after the effect has been completed.
Effect.SlideDown('dom_element_id', { afterFinish: function () {$('button_id').hide(); } } );
EDIT
Note that beforeFinish, afterFinish, beforeSetup, afterSetup, beforeUpdate and afterUpdate options can be used for any effects as they are part of Effect.Base.
Also see the official docs here.