Develop Reference

Fading images - Where to call .fadeIn and .fadeOut?

Been hitting my head a while with this one.
I'm a total novice in JavaScript and jQuery.
After a lot of trial and error I eventually managed to write a function to change the src attribute of an image to create a slideshow as such:
$(function () {
var slideshow = $("#img_slideshow");
var images = [
'img/slideshow1.jpg',
'img/slideshow2.jpg',
'img/slideshow3.jpg'];
var current = 0;
function nextSlide() {
slideshow.attr(
'src',
images[current = ++current % images.length]);
setTimeout(nextSlide, 5000);
}
setTimeout(nextSlide, 5000);
});
This works perfectly, changes the image every 5 seconds. What I wanted, was a fade transition between them. I tried calling .fadeIn and .fadeOut in several places I find logic, such as next to setTimeout (probably wrong) but nothing will work.
Can anyone help? And I'd be grateful to have a simple explanation of where it should be called, could help a lot of folks out there. Thanks.

It should be done like this (using the callbacks) -
function nextSlide() {
slideshow.fadeOut(function() {
$(this).attr('src',images[current = ++current % images.length]).fadeIn();
});
setTimeout(nextSlide, 5000);
}
This insures that the source is not changed until the fade out is complete. The source changes and the fade in then happens. This will not be a cross-fade though.

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

Jquery setInterval too fast when coming from another tab

I've got a site with endlessly sliding images using jquery's setIntervall() function.
When calling the page in Chrome 13 and I switch to another tab to come back a few seconds later the image sliding is happening faster, as if it tried to keep up to where it was if it hadn't switched to another tab.
How could I resolve this issue?
$(window).load(function() {
setInterval(nextSlide, 3500);
});
function nextSlide(){
offset += delta;
$("#slideContent").animate({left: -1 * offset}, 1000);
}

At the beginning I would like to apologize for all the mistakes - my English is not perfect.
The solution of your problem may be very simple:
$(window).load(function() {
setInterval(nextSlide, 3500);
});
function nextSlide(){
offset += delta;
$("#slideContent").stop(true,true).animate({left: -1 * offset}, 1000);
}
inactive browser tabs buffer some of the setInterval or setTimeout functions.
stop(true,true) - will stop all buffered events and execute immadietly only last animation.
This problem will also appears in Firefox > 5.0 - read this article: Firefox 5 - changes
The window.setTimeout() method now clamps to send no more than one
timeout per second in inactive tabs. In addition, it now clamps nested
timeouts to the smallest value allowed by the HTML5 specification: 4
ms (instead of the 10 ms it used to clamp to).
here you can read, how animate works - it fires setInterval function many times. How animate really works in jQuery

The latest versions of Chrome apparently slow down the operation of setInterval when a tabbed page is in the background and then when you bring that page forward it tries to catch up.
On the Chromium blog, Google said:
In the forthcoming Chrome 11 release, we plan to reduce CPU consumption even for pages that are using setTimeout and setInterval. For background tabs, we intend to run each independent timer no more than once per second. This change has already been implemented in the Chrome dev channel and canary builds.
Your interval is 3.5 seconds, but the animation itself may be using much shorter timers.
Possible ways to work-around it:
Stop your timer/animation when the window is not visible. Restart the timer/animation when the window becomes visible.
Instead of setInterval, use setTimeout and then just reset the setTimeout each time it fires to create your own repeating interval - though in your case, it may be jQuery's use of timers that are the issue - I don't know.
Slow your timers down so they don't run afoul of this (again might be inside of jQuery not your own timers).
The best option is probably to figure out when to just stop and then restart the animation.
Similar question here: Chrome: timeouts/interval suspended in background tabs?.
FYI, Chrome has new experimental API for detecting page visibility for just this reason. You can read about it here: http://code.google.com/chrome/whitepapers/pagevisibility.html. it helps solve the issue when your page is visible, but doesn't have focus.

Hey are you using Jquery 1.6?
This may be the cause since 1.6 uses requestAnimationFrame for animations.
You may want to check this page out for a replacement for setInterval, clearInterval
http://blog.blenderbox.com/2011/06/24/jquery-1-6-1-and-setinterval/
code:
https://gist.github.com/1002116 [edit: updated source, edit2: currently doesnt work with firefox due to firefox bug. -- I had do downgrade to JQuery 1.5]
From the blogger:
Then, where you were calling setInterval(func, poll), you now call
requestInterval(func, poll). Where you call clearInterval(interval),
you now call clearRequestInterval(interval);

Have you tried not using setInterval or setTimeout at all, but just use the complete function of the animate function to kick off the next slide? The delay function is set to 2500 ( i.e. 1000 for the animate subtracted from the 3500 of the setInterval). I haven;t tried this with Chrome, so please let me know if it works.
var slider = function(n){
$("#slideContent").delay(2500).animate({left: -1 * n * delta},
1000,
function(){slider(n+1)}
);
};
slider(1);

try setInterval() it works
<script type="text/javascript" src="js/jquery-1.5.js"></script>
<script type="text/javascript">
var i=1;
$(document).ready(function(){
slideShow();
$("#next").click(function(){
slideShow();
});
});
function slideShow(){
if(i<3){
$("#slide-container").animate({ left:"+=35px" }, { duration:500})
$("#slide-container").animate({ left:"-=735px" }, { duration:250})
i++;
}
else {
$("#slide-container").animate({ left:"+=1400px" }, { duration:1000})
i=1;
}
setTimeout('slideShow()',2000);
}
</script>

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.

How do you pause before fading an element out using jQuery?

I would like to flash a success message on my page.
I am using the jQuery fadeOut method to fade and then remove the element. I can increase the duration to make it last longer, however this looks strange.
What I would like to happen is have the element be displayed for five seconds, then fade quickly, and finally be removed.
How can you animate this using jQuery?

The new delay() function in jQuery 1.4 should do the trick.
$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();

use setTimeout(function(){$elem.hide();}, 5000);
Where $elem is the element you wish to hide, and 5000 is the delay in milliseconds. You can actually use any function within the call to setTimeout(), that code just defines a small anonymous function for simplicity.

While #John Sheehan's approach works, you run into the jQuery fadeIn/fadeOut ClearType glitch in IE7. Personally, I'd opt for #John Millikin's setTimeout() approach, but if you're set on a pure jQuery approach, better to trigger an animation on a non-opacity property, such as a margin.
var left = parseInt($('#element').css('marginLeft'));
$('#element')
.animate({ marginLeft: left ? left : 0 }, 5000)
.fadeOut('fast');
You can be a bit cleaner if you know your margin to be a fixed value:
$('#element')
.animate({ marginLeft: 0 }, 5000)
.fadeOut('fast');
EDIT: It looks like the jQuery FxQueues plug-in does just what you need:
$('#element').fadeOut({
speed: 'fast',
preDelay: 5000
});

For a pure jQuery approach, you can do
$("#element").animate({opacity: 1.0}, 5000).fadeOut();
It's a hack, but it does the job

var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
setTimeout(function(){
$msg.fadeOut(function(){
$msg.remove();
});
},5000);
});

Following on from dansays' comment, the following seems to work perfectly well:
$('#thing') .animate({dummy:1}, 2000)
.animate({ etc ... });

dansays's answer just doesn't work for me. For some reason, remove() runs immediately and the div disappears before any animations happen.
The following works, however (by omitting the remove() method):
$('#foo').fadeIn(500).delay(5000).fadeOut(500);
I don't mind if there are hidden DIVs on the page (there shouldn't be more than a few anyway).

Update for 1.6.2
Nathan Long's answer will cause the element to pop off without obeying delay or fadeOut.
This works:
$('#foo').delay(2000).fadeOut(2000);