Develop Reference

jQuery Async behavior in each-loop Fade-Animation

i have a small problem with the async behavior of JS. My plan is to loop through some hidden images and fade them in and out with a specified FadeIn-, FadeOut-, and Staytime. I tried this code to do this:
jQuery('.fader img').each(function(x, y) {
var faderImg = jQuery(y);
faderImg.fadeIn(400).delay(1000).fadeOut(400);
});
My problem is that is doesnt wait for the execution of the last chained fadeOut Statement but insted doing the animation on every picture simultaneously. I tried it with async and await too but it dont fix my problem insted it has the same behavior as described above.
jQuery('.b1-img-fader img').each(async function(x, y) {
var faderImg = jQuery(y);
await faderImg.fadeIn(400).delay(1000).fadeOut(400);
});
Can someone help to to archive that every image is fading in after the image before is finished with fading out? The loop should only start the next turn if the functionality inside is finished.
Thanks for any help!

Assuming you want each image to animate individually you need to delay each successive one with the time take to complete all previous images.
To do that you can get the delay amount by multiplying the index of the current image by the time the animation takes, like this:
$('.b1-img-fader img').each(function(index, el) {
$(this).delay(index * 1800).fadeIn(400).delay(1000).fadeOut(400);
});

image source changing at the wrong time after a few minutes in a slide show

I'm a designer more than a programmer, but I'm trying to get the hang of javascript so I have more design options when it comes to web design beyond plugins. So here's the problem I'm having.
I have a page with 4 slide shows. Right now I have it so that when one of 4 buttons are clicked it will change the array it gets the image sources from and loop through the images every 4 sec.
At first the slideshows look fine and the change happens when the image is hidden, but after a couple minutes the source change falls out of time with the fading effects and happens when its visible. It also works fine to have the shows switch with no problem.
All the timing and variables get reset and the new parameter from the onClick-call switches which array is used. I tried one solution where I made the image change part it's own function and called it from other functions to control the timing more, but then for some reason clearTimeout stopped working to clear the loop and it would still play one instance of the loop at the same time as another.
Maybe someone can look at this code and see a simple fix for the timing issue.
i=0
var delay=4000
var fade=1000
var timer;
function play(showNum){
var showNum = showNum;
$("#show").stop(true,true)
newShow();
changeInfo(showNum);
$("#show").hide();
change(showNum);
}
function change(showNum){
$("#show").fadeIn(fade);
$("#show").attr("src",showNum[i]);
i = (i+1)% showNum.length;
$("#show").delay(delay-(fade*2)).fadeOut(fade);
timer=setTimeout (function(){change(showNum)},delay)
}
function newShow(){
clearTimeout(timer);
i=0;
}
Here is an update to the code since I posted this.
function play(showNum){
var showNum = showNum;
$("#show").stop(true,true);
newShow();
$("#show").hide();
changeInfo(showNum);
change(showNum);
$("#show").fadeIn(fade);
setTimeout(function(){loop(showNum);},fade*2);
}
function loop(showNum){
$("#show").fadeOut(fade);
setTimeout (function(){change(showNum);},fade);
$("#show").fadeIn(fade);
int=setTimeout (function(){loop(showNum);},delay);
}
function change(showNum){
$("#show").attr("src",showNum[i]);
i = (i+1)% showNum.length;
}
function newShow(){
clearTimeout(int);
i=0;
}
I don't get a problem with the timing anymore, but I do get a weird hiccup if I click on a new slideshow when it's on fadeOut where it changes image then changes back and then fades in with the next image of the previous slide show then fades out and starts the right slide show from there.

Simple slider with setInterval() with strange behavier

I'm trying to make simple slider by using setinterval and jquery.
you can have a look here http://jsfiddle.net/5m2Dq/
Slider works fine when it is in focus on browser but when we go to different tab for more than 5 min all the div's come's under each other, and start toggling.
$('#fbLoginSlide div:gt(0)').hide();
setInterval(function(){
$('#fbLoginSlide :eq(0)').fadeOut('slow').hide()
.next('div.loginSlide').fadeIn('slow')
.end().appendTo('#fbLoginSlide');
},2000);
Is there a simple way to achieve the sliding effect like this without any plugin.

This occurs probably because your browser starts missing timeouts. Especially if you are viewing another tab, the browser thinks that it is not important to call the callback with exactly 2 second intervals. You should ditch the setInterval function altogether! Use instead the completion callback of fadeOut and fadeIn to trigger the effects.
Try something like
var cycle = function() {
$('#fbLoginSlide :eq(0)').fadeOut('slow').hide()
.next('div.loginSlide').fadeIn('slow', function() { setTimeout(cycle, 1500); })
.end().appendTo('#fbLoginSlide');
};
cycle();

Different delay for multiple nivo slider on same page

I found Nivo slider pretty promising and I have implemented it in several of my new projects.
However, now, I would like to have multiple (2 to 3) sliders on the same page. This is possible. But I want each of them start after a certain delay with respect to last one. Example, first one loads on page load, second one, 1 second after that and so on. I referred to the community support and found this article.
http://dev7studios.com/support/#/discussion/212
However, even this does not solve it.
Please help me with the same.
Thanks a lot.

$('#slider1').nivoSlider()
.delay(1000)
.queue(function(){
$('#slider2').nivoSlider()
.delay(1000)
.queue(function(){
$('#slider3').nivoSlider();
});
});
http://jsfiddle.net/LfkkF/17/

I couldn't get the above answer to work so i implemented a javascript delay like so:
$(window).load(function() {
setTimeout(function() {$('#slider3').nivoSlider({
directionNav : false,
controlNav: false,
});},250);
});
With the number (250) being the delay in miliseconds. I only wanted a very short delay so this method worked for me, but the image displays a loading-icon for the duration of the delay, so anything longer than .5 sec would look ugly I guess.
Here's where I found the method.
http://www.sean.co.uk/a/webdesign/javascriptdelay.shtm

A sticky situation for jQuery slideshow

I'm required to develop a slideshow (not an existing one) with jQuery. I was able to change picture with a function that I created named changePic (takes an image link). It incorporates the fading animation from the jQuery library.
For the slideshow I'm trying to use a while loop. It kind of works, except that it doesn't wait for the animation to finish.
How do I, a) wait for the animation to finish, b) delay the changing picture so it display the picture for a couple of seconds?
Also tried Settimeout, and it doesn't work.
Edit:
Basically changing image is like this:
function changePic(imglink){
var imgnode = document.getElementById("galleryimg");
$(imgnode).fadeTo(500, 0, function(){
$(imgnode).attr("src", imglink);
$(imgnode).fadeTo(1000, 1);
})
}
and the slideshow code is like this, but obviously it shouldn't.
function slideshow(gallerylinks){
var i=0;
while (i<gallerylinks.length){
changePic(gallerylinks[i]);
i++;
}
}

You could always try ditching the while loop, and going with a perpetually recursive function...
on the .animate, you could add a timeout function (at whatever interval) that calls the changePic function. As I have no idea what your code looks like, I will provide a fantastically generic outline.
/* array of imgUrls */
var imgUrls = new Array(); //populate it however
changePic(slideToShowIndex, fadeOutSpeed, fadeInSpeed, slideDelay)
{
$('#slideHolder').animate({ opacity: 0}, fadeOutSpeed , function(){
$('#slideHolder').attr('src', imgUrls[slideToShowIndex]);
$('#slideHolder').animate({ opacity: 1 }, fadeInSpeed, function() {
setTimeout(function() { changePic(slideToShowIndex+1, fadeOutSpeed, fadeInSpeed, slideDelay);}, slideDelay});
});
}});
}
$(document).ready(function() {
changePic(0, 5000, 5000, 10000);
});
This should (in theory) fade the image out, swap it with the new one, and fade it in (both taking 5 seconds) and then adding a delay to call itself with the next slide index in 10 seconds.
This is in no way perfect, but does outline the general idea. Since we have no idea what your code looks like, I can only assume your setTimeout was in the wrong spot. Doing it like this will make sure that the animation has finished before the timeout is set. This guarantees that the slide wont change until after the animation has changed.
of course you could always use a combination of the ':not(:animated)' selector and a setInterval to achieve much the same effect.
EDIT: made a slight change to stack the animations properly. The thoery behind this still works even with the OPs addition of code.

You could have provided more details or example code but have a look at stop() and delay() functions.