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});
Related
I have a page that uses
$(id).show("highlight", {}, 2000);
to highlight an element when I start a ajax request, that might fail so that I want to use something like
$(id).show("highlight", {color: "#FF0000"}, 2000);
in the error handler. The problem is that if the first highlight haven't finished, the second is placed in a queue and wont run until the first is ready. Hence the question: Can I somehow stop the first effect?
I listed this as a comment for the accepted answer, but I thought it would be a good idea to post it as a standalone answer as it seems to be helping some people having problems with .stop()
FYI - I was looking for this answer as well (trying to stop a Pulsate Effect), but I did have a .stop() in my code.
After reviewing the docs, I needed .stop(true, true)
From the jQuery docs:
http://docs.jquery.com/Effects/stop
Stop the currently-running animation on the matched elements....
When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with .slideUp() when .stop() is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.
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.
If the jumpToEnd argument is provided with a value of true, the current animation stops, but the element is immediately given its target values for each CSS property. In our above .slideUp() example, the element would be immediately hidden. The callback function is then immediately called, if provided...
.stop(true,true) will freeze the effect so if it's invisible at the time then it remains invisible. This could be a problem if you are using the pulsate effect.
$('#identifier').effect("pulsate", {times:5}, 1000);
To get around this I added
$('#identifier').stop(true, true).effect("pulsate", { times: 1 }, 1);
In my case, using below code does not work and keep your opacity value remain:
$('#identifier').stop(true, true).effect("pulsate", { times: 1 }, 1);
For me just remove opacity are working:
$('#identifier').stop(true, true).css('opacity','');
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(); });
Trying to get a simple fadeIn/fadeOut work the way I want, basically, my problem is that it won't overwrite, or stop the function, if I've hovered over another element that triggers the action, and it kind puts it in a queue, and will play all the animations, even after my mouse is not even near the elements. I would like it to not let the function trigger again, unless the fadeout has been finished.
$("p").hover(
function()
{
$(document.getElementById('Bottom_Menu')).fadeIn(200);
},
function()
{
$(document.getElementById('Bottom_Menu')).fadeOut(350);
});
To quickly answer your question, you can use stop().
$("#Bottom_Menu").stop().fadeTo(200, 1);
You don't have to use document.getElementById; instead, just use #id. For classes, use .class. It's all built in to jQuery. :)
UPDATE
I'm now using fadeTo instead of fadeIn, because fadeIn only works when display is none. So if we're canceling the previous animation with stop(), we need to use fadeTo, since the display may not be none. (When you use fadeOut, it fades out the element, and when complete, it sets the element's display to none, which hides the element.)
Notes:
The second property of fadeTo is opacity.
fadeTo, like fadeIn, still automatically changes the display property so the element is visible.
$("#Bottom_Menu").clearQueue();
clears all pending animations/operations to do on this element
I want to give the same animation to a set of elements, but each incrementally delayed so that the animations make a sort of a 'wave'.
I made a fiddle about it; http://jsfiddle.net/ttLJ3/
Basically each element be delayed by increments of 50ms, do a thing, wait 300ms and undo it.
It just simply doesn't seem to work. It does nothing. If I remove the .delay(300).show(), all elements disappear immediately.
How can I make this work? Thanks in advance! :)
I was able to fix your problem here.
http://jsfiddle.net/ttLJ3/1/
Since delay works with the fx queue, you have to pass in an integer of sorts for delay to work otherwise the hide and show methods will execute immediately. Making it seem as if nothing is happening at all. I passed in 0 to each of the hide and show calls to fix the issue.
$(this).delay(50 * index).hide(0).delay(300).show(0);
According to the .hide() doco, "When a duration is provided, .hide() becomes an animation method." Apparently this means that if you don't provide a duration the hiding isn't done in the animation queue and so doesn't work with .delay().
So try adding a short duration to .hide() and .show():
$(this).delay(50 * index).hide(1).delay(300).show(1);
Updated demo: http://jsfiddle.net/ttLJ3/2/
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/