Develop Reference

Add a delay to jQuery fadeIn function

I am trying to add a delay to my fadeIn function in jQuery. The purpose of the code is that when 'topmods' or 'dailyskins' button is pressed it will hide/show the other parent div.
Currently when i press the div 'topmods' is does hide the div 'dailyskins' though the content of 'topmods' goes below 'dailyskins' for a split second until 'dailyskins' has finished fading out.
I think this would be solved by adding a delay to both fadeIn and Out, though i don't know how to add this,
Please could you add a delay of 200ms to each of the fadeIn segments.
jQuery(document).ready(function(){
$("#topmods").hide();
jQuery('#dropdailyskin').live('click', function(event) {
jQuery('#dailyskins').fadeIn('show');
});
jQuery('#dropdailyskin').live('click', function(event) {
jQuery('#topmods').fadeOut('show');
});
jQuery('#dropdownmods').live('click', function(event) {
jQuery('#dailyskins').fadeOut('show');
});
jQuery('#dropdownmods').live('click', function(event) {
jQuery('#topmods').fadeIn('show');
});
Thanks

Just add the .delay to your code like this
$("idhere").delay(1000).fadeIn(500);
its in milliseconds.

You can add a timeout before executing your function using this:
setTimeout(function(){jQuery('#dailyskins').fadeIn('show')}, 200);

or you can use.
$("idhere").delay(1000).show();

Showing text for a while

http://jsfiddle.net/639RF/
$("button").click(function () {
//#t holds 'X'
$('#t').fadeOut(1000).text('ZZ').fadeIn(1000);
$('#t').delay(1000);
$('#t').fadeOut(1000).text('YY').fadeIn(1000);
});
I'm trying to show some text for a while, then replacing it with some other text.
The way I was trying to do it ignores the first text I am trying to show, and replacing it with the last one from the beginning.
It should:
Fade 'X' out,
Fade 'ZZ' in,
hold for a second
Fade 'ZZ' out,
Fade 'YY' in.

Every time you call $("#t"), you are creating a new jQuery object. That object may have the same element, but it is still a different object with different properties.
Try this:
var t = $("#t");
t.fadeOut(1000,function() {t.text("ZZ")}).fadeIn(1000);
t.delay(1000);
t.fadeOut(1000,function() {t.text("YY")}).fadeIn(1000);
Edit again: Figured it out! You need to use the animation callback to handle things that aren't normally part of the animation queue.

You can use callbacks as a second parameter to fadeOut and FadeIn, also to wait for a second, you can also use the raw setInterval method.
$(document).ready(function () {
$("button").click(function () {
var $dom = $('#t');
$dom.fadeOut(1000, function(){ //first, fades out.
$dom.text('ZZ').fadeIn(1000,function(){ //changes the text to ZZ,
var $wait = setInterval(function(){ //wait for a second
clearInterval($wait); //prevent the loop of waiting
$dom.fadeOut(1000,function(){ //fadeout for a second
$dom.text('YY').fadeIn(1000); //change the text into YY, and fade in
});
},1000);
});
});
});
});
JSFiddle: http://jsfiddle.net/639RF/3/

How about this?
Note: feel free change the duration as you like.
Demo: JSFiddle
$(document).ready(function () {
$("button").click(function () {
$('#t').fadeOut(500, function(){ //fadeout in half a second and when complete
//fadein in half a second, wait for 2 seconds, when complete
$(this).text('ZZ').fadeIn(500).delay(2000).fadeOut(500, function(){
//fadein in half a second
$(this).text('YY').fadeIn(500)
});
});
});
});

Fading in with jQuery creating a queue

I'm trying to create a simple sequence: find first element, hide its siblings and then fade it in. I have this sort of working; however, it does not wait for its siblings to fade out first:
var $firstCaption = $('.caption').first();
$firstCaption.appendTo('.caption-content').siblings('.caption').fadeOut(function(){
$firstCaption.fadeIn(); // this is not waiting
});
I could use a delay, but I think that's quite a messy solution? Is there another method?
JSFIDDLE:
http://jsfiddle.net/tmyie/8VjLD/

You could use a promise:
DEMO jsFiddle
$('a').click(function () {
var $firstCaption = $('.caption').first();
$firstCaption.appendTo('.caption-content').siblings('.caption').fadeOut().promise().done(function () {
$firstCaption.fadeIn();
});
});
BTW, you could wish to use .finish() here if button clicked multiple times in a row:
DEMO with finish
$firstCaption.appendTo('.caption-content').siblings('.caption').finish()...

Jquery Animation on div, remove after that

I create several divs with the id error_count dynamically. After the animation below i want them to be removed again.
The current problem is, that some divs that are created later than others, disappear earlier than they should.
var timer = [];
$("#"+error_count).fadeIn().delay(1500).fadeOut();
timer[error_count] = setTimeout(function(){
$("#"+error_count).remove();
}, 2000);

The second parameter in the fadeOut() (and fadeIn(), for that matter) method is a callback; a function to call when the fade out has finished:
$("#"+error_count).fadeIn().delay(1500).fadeOut(200, function(){
$(this).remove();
});

Put a callback on the fadeOut method that will delete the element after the fadeOut completes.
$("#" + error_count).fadeIn().delay(1500).fadeOut(400, function(){
$(this).remove();
});

Try this:
$.when (
$("#"+error_count).fadeIn().delay(1500).fadeOut();
).done (
$("#"+error_count).remove();
);

.text() immediately being processed

I do not know what title to give so please I do apologize, i'm just getting curious why in the code below, the text is getting changed before it even fades out even if i've put it after a fade.
$('form').submit(function(){
return false;
});
$('button').on('click',function(){
$(this).addClass('busy');
$(this).parent().find('button').attr('disabled',true);
$(this).parent().find("button:not('.busy')").fadeOut(500);
$('p').text('Processing..').fadeIn(500).trigger('sfsfsf','wala');
});
$('p').on('sfsfsf',function(e,data){
//this line below
$(this).delay(1000).fadeOut(500).text('Complete!');
$(this).fadeIn(500,function(){
$(this).delay(500).fadeOut(500);
});
});
http://jsfiddle.net/v4nwQ/
Why is that so, and how do i Fix it?

Because fadeOut() returns immediately before the animation has complete; text() then gets processed straight away. You should instead change the text in the fadeOut() callback;
$(this).delay(1000).fadeOut(500, function () {
$(this).text('Complete!');
});
Unrelated, but something to note; you should look at caching the result of $(this); you're calling it a lot.
$('p').on('sfsfsf',function(e,data){
var self = $(this);
self.delay(1000).fadeOut(500, function () {
self.text('Complete!');
});
self.fadeIn(500,function(){
self.delay(500).fadeOut(500);
});
});

Yes, that is correct. All functions in a chain execute immediately. If you want something to execute after an animation, you use the callback parameter that all animations include.
And delay only delays animations! It has no effect on things that are not animations. So:
$(this).fadeOut(500, function() { $(this).text('Complete!'); });

Try:
$(this).parent().find("button:not('.busy')").fadeOut(500, function() {
$('p').text('Processing..').fadeIn(500).trigger('sfsfsf','wala');
});

you need to change the text in the call back funciton of the fade like you're doing it in the last few lines:
$(this).fadeIn(500,function(){
$(this).delay(500).fadeOut(500);
});
otherwise the text change is executed immediately