$('#gallerie ul li:eq(1)').animate({opacity: 1}, 1250).remove(); //results in instand remove
$('#gallerie ul li:eq(1)').delay(3000).remove(); //instant remove
$('#gallerie ul li:eq(1)').remove().delay(3000); //that didnt work either
How can I remove the object after 3 seconds instead of being instantly removed?
setTimeout(function(){
$('#gallerie ul li:eq(1)').remove();
},3000);
If you want to do the it .delay way, you'll need to incorporate a .queue:
$("#gallerie ul li:eq(1)").delay(3000).queue(function() {
$(this).remove();
});
Demo: http://jsfiddle.net/karim79/MT4Yd/
The delay method is used for animations, so only animation methods that are chained after it are delayed. The delay method places a delay on the animation queue, it doesn't delay the execution of the code.
To remove elements after an animation, you can use it's callback method. Example:
$('#gallerie ul li:eq(1)').fadeOut(3000, function() {
$(this).remove();
});
The manual page says (quite clearly, actually):
"Added to jQuery in version 1.4, the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. 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."
remove() won't use the effects queue.
You can use jQuery's fadeOut(), hide() ... or as a complete equivalent to your original attempt, Javascript's basic setTimeout function.
Hope that helps.
you can do:
setTimeout(function(){
$('#gallerie ul li:eq(1)').remove();
},3000);
how about this:
$('#gallerie ul li:eq(1)').animate({opacity: 1}, 1250,function(){
$(this).remove();
});
Related
This is my code:
$("#form_editor").addClass('abcd')
$("#form_editor").delay(32000).removeClass('abcd')
The class never gets applied if I have the second line uncommented. If I comment it out, then the class gets applied as expected. It seems that the second line executes without any delay at all i.e. ignores .delay(32000).
Does delay work with addClass and removeClass? I assumed it would delay the call to any function that came after it, but apparently not as it seems to execute right away.
You can, but you need to queue()
$("#form_editor").addClass('abcd').delay(3200).queue(function() {
$(this).removeClass('abcd');
});
.abcd:before{
content:"abcd";
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form_editor">efgh....</div>
or use setTimeout method:
var $formEditor = $("#form_editor"); // we plan to reuse it so let's cache it!
$formEditor.addClass('abcd'); // add
setTimeout(function(){
$formEditor.removeClass('abcd'); // remove
}, 3200);
.abcd:before{
content:"abcd";
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form_editor">efgh....</div>
jQuery animations (.animate, .fadeTo, fadeIn, etc...) add to the animation queue stack, an jQuery internal function than handles "what's next?" (laically speaking), while other "animation-less" methods (like .text(), addClass(), .on(), .click() etc...) do not.
To easily remember .queue() think of it as the missing (really is) callback functionality for .delay(2000, function(){ /*BAM!*/ }) /* well sadly, this does not works */
Is there anyway to wait for a jQuery animation to finish before proceeding with another command?
For example, I want to fade out/slide up an element, change some items within the element and then fade them back in/slide back down.
If I put the statements one after another, you can see the items change before the animation completes.
$('#item').fadeOut();
$('#item').html('Changed item');
$('#item').fadeIn();
Thanks.
You can pass callback in fadeIn/fadeOut. jQuery docs
$('#item').fadeOut('slow', function(){
$('#item').html('Changed item');
$('#item').fadeIn();
});
You can either use the callback method which gets called from .fadeOut, like
$('#item').fadeOut('fast', function() {
$(this).html('Changed item').fadeIn();
});
or use the underlaying Deferred object
$('#item').fadeOut('slow').promise().done(function() {
$(this).html('Changed item').fadeIn();
});
Pass a callback function to fadeOut.
$("#item").fadeOut(function() {
$(this).html("changed").fadeIn();
});
This is the sort of thing you'll learn in a basic jQuery tutorial.
$('#item').fadeOut('slow', function() { // do your stuff here });
For more info: http://docs.jquery.com/Effects/fadeOut#speedcallback
I am attempting to remove an object from a page with jQuery. I also want to animate the removal. The goal is to make the element fadeOut(), wait a second, then remove(). But it seems to refuse to wait to remove the element, even when I use it in a setTimeout() function. How can I make an element fadeOut(), and then remove() it?
$("button").click(function() {
$(this).fadeOut();
setTimeout(function() { $(this).remove();}, 1000);
});
Read manual carefully:
http://api.jquery.com/fadeOut/
The fadeOut() method has a callback that is invoked after the fadeOut completes. To use it:
$("button").click(function() {
$(this).fadeOut(function() { $(this).remove();});
});
There should be no reason to wait one second after the fadeOut completes, before removing the element, because the element will be invisible when it is removed.
In your timeout function, this isn't what you think it is - it's actually the global window object.
In any event (no pun intended) you should use a "completion callback":
$("button").click(function() {
$(this).fadeOut('slow', function() {
$(this).remove();
});
});
Never, ever, mix setTimeout and the animation queue. It's fine to interleave the two, i.e having a completion callback start a timer, or having a timer starting an animation, but it's never OK to assume that you can start both a 1000ms animation and a 1000ms timer and have them complete at the same time.
EDIT fixed code - no need for self in a completion callback, I was still thinking about setTimeout and this when I wrote that!
$('button').click(function(){
$(this).fadeOut(function(){$(this).remove()});
});
DEMO
Why not just use the callback of fadeout?
$("button").click(function() {
$(this).fadeOut(function(){$(this).remove();});
});
try this one, maybe it helps:
$("button").click(function() {
(function(that) {
that.fadeOut();
setTimeout(function() {
that.remove();
}, 1000);
})($(this));
});
I have been using jQuery's stop(true, true) method to clear running animations so the next one starts immediately. I noticed that the first parameter, clearQueue, clears the entire animation queue but the second parameter, jumpToEnd, only jumps to the end of the currently running animation and not the ones that were removed from the queue. Is there a way to have it clear and jump to the end of all queued animations?
I've ended up chaining a few stop(false, true) calls instead, but this will only handle 3 queued animations, for example.
$(this)
.stop(false, true)
.stop(false, true)
.stop(false, true)
.addClass('hover', 200);
Edit:
I ended up adding my own method, stopAll, as per Ates Goral's answer:
$.fn.extend({ stopAll: function () {
while (this.queue().length > 0)
this.stop(false, true);
return this;
} });
$(this).stopAll().addClass('hover', 200);
I hope someone else finds this useful.
Chaining multiple stop(false, true) makes sense. Instead of hard-coding a fixed number of chained calls, you could check the queue length:
while ($(this).queue().length) {
$(this).stop(false, true);
}
Demo: http://jsfiddle.net/AB33X/
jQuery 1.9 introduced the .finish() method, which achieves exactly that.
I also notice from the documentation of the .finish() method in jQuery 1.9 that
Animations may be stopped globally by setting the property $.fx.off
to true. When this is done, all animation methods will immediately
set elements to their final state when called, rather than displaying an effect.
There is also a nice demo of the various methods on the .finish() documentation page.
Test for presence of class (set upon hover and removed on mouseOut animate callback) before staring new animation. When new animation does start, dequeue.
$("div").hover(function(){
if (!$(this).hasClass('animated')) {
$(this).dequeue().stop().animate({ width: "200px" });
}
}, function() {
$(this).addClass('animated').animate({ width: "100px" }, "normal", "linear", function() {
$(this).removeClass('animated').dequeue();
});
});
I'm trying to show a div thats set to display: none; for 5 seconds with
$('#div').show().delay(5000).hide();
but it deson't work, it just goes straight to hide()
Can any of you help me?
Do it like this:
$('#div').show(0).delay(5000).hide(0);
By passing in numbers to .show() and .hide(), jQuery will take those methods into its internal fx queue (even if the number is zero). Since .delay() only works within a queue, you need that little workaround.
example: http://jsfiddle.net/zceKN/
You need to use .queue() because .hide() isn't queued by default.
$("#div").show().delay(5000).queue(function (next) {
$(this).hide();
next();
});
You need a duration on your hide for it to work:
$('#div').show('slow').delay(5000).hide('slow');
Example: http://jsfiddle.net/Paulpro/GLTaB/
$('#div').show();
setTimeout(function(){$('#div').hide();}, 5000);
.delay() works for animations only