Develop Reference

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

why setInterval() cycle goes faster every time?

I'm building a custom slider on Javascript , and I want that every time the user clicks on a div of the slider, the slider should stop for X seconds.
My code is:
$(document).ready(function () {
var ciclo;
var index_slide = 1;
function startSlidercicle() {
ciclo = setInterval( function() {
// Slider code goes here
}, 3000);
}
//Here I start the slider animation
startSlidercicle();
//When the user clicks on a div called 'slide', stop the cycle and start again the animation cycle
$('.slide').on('click', function() {
clearInterval(ciclo);
setTimeout(startSlidercicle(), 3000);
});
});
But the problem is that everytime I click and stop the slider, the cycle starts faster and faster. How can I fix it?

Instead of:
clearInterval(ciclo);
setTimeout(startSlidercicle(), 3000);
or:
clearInterval(ciclo);
setTimeout(startSlidercicle, 3000);
I changed the code to be:
clearInterval(ciclo);
startSlidercicle();
And now the slider just works fine. I think that, in the first two proposals, every time I click on the div, a new function is created, "overlapping" over the existing cycle and, thus, it looks like the slider speeds up, but its just one cycle starting over another.

You need to change this:
clearInterval(ciclo);
setTimeout(startSlidercicle(), 3000);
to this:
clearInterval(ciclo);
setTimeout(startSlidercicle, 3000);
In your existing code, you are calling startSlidercirle immediately and it is not waiting until the setTimeout() fires because you have the () after the function name. That means to execute it immediately and pass the result of executing that to setTimeout(). You want to just pass the function reference to setTimeout() which is done by just having the name of the function with no () after it. This is a common mistake.

Jquery fadeIn/fadeOut img change

I've been trying to fix this bug of mines for about 3 hours now, searched everything and everywhere and can't find an answer.
The #test is an img element. I want the element to first fadeout, then change it's image and then fadein. But when I click on it it changes the image WHILE fading out and then fades in with the already changed image. Whats the problem here? Maybe I should use the animate() function or stop() or something else? Really confused, javascript and jQuery is so very hard
$("#test").click(function(){
ASD = $("#test").attr('alt');
$("#test").fadeOut(700);
$("#test").attr('src', ASD);
$("#test").fadeIn(700);

You should use the callback parameter for .fadeOut() which gets called when the animation ends:
$("#test").click(function(){
ASD = $("#test").attr('alt');
$("#test").fadeOut(700, function() {
$("#test").attr('src', ASD);
$("#test").fadeIn(700);
});
});

You need to use the callback of fadeOut so as to wait until the first animation is finished before you replace the source and start the second animation:
$("#test").on('click', function(){
var ASD = $(this).attr('alt');
$(this).fadeOut(700, function() {
$(this).attr('src', ASD).fadeIn(700);
});
});

Use the callback option in fadeOut(). This ensures the other actions will only happen once fadeOut finishes:
$("#test").click(function(){
ASD = $("#test").attr('alt');
$("#test").fadeOut(700, function() {
$("#test").attr('src', ASD);
$("#test").fadeIn(700);
});
});

.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