We Keep Coding

Remove class from the dom after transition fadeout effect is done [duplicate]

$('#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();
});

why can't I delay addClass and removeClass using jquery?

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 */

How to undo .click(false)

I have a page transition which uses jQuery animate. I found that the following code:
$("body").click(false);
is the best way to stop any mouse clicks on the page while the animation is running. But I'm not sure how to undo it! Any ideas?

Try using .unbind()
$("body").unbind("click");

You can check for :animated length on body click.try this:
$('body').click(function () {
if ($(':animated').length) {
return false;
}
});

show me the animation code snippet. You should place $("body").unbind("click"); in the callback of the animation function. When it's done animating, it will unbind the click again.

run animation only if not already running jQuery UI

I am using jQuery UI's Bounce Effect on a click event like this
$("#myelm").click(function(){
$(".wlbutton").children("span.new").effect( "bounce", "slow");
});
I would want to run the effect only if it's not already running. So if you click twice fast it will only act on the first click. How can I achieve this?
I've tried to clear the queue with jQuery's .stop() without any luck.

You can use .not to filter it:
$('#myelm').click(function(){
$('.wlbutton').children('span.new').not(':animated').effect('bounce', 'slow');
});
However I would use .is function to check instead of a filter because of code readability

Use the :animated selector to check whether the particular element is animating or not. If it is currently getting animated, Just let that click event ignored.
Try,
$("#myelm").click(function(){
var xEle = $(".wlbutton").children("span.new");
if(xEle.is(':animated')) { return; }
xEle.effect( "bounce", "slow");
});
The another way would be using .stop().
$("#myelm").click(function(){
$(".wlbutton").children("span.new").stop().effect( "bounce", "slow");
});
DEMO

Problems with removing elements in jQuery

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));
});