Develop Reference

Jquery/JS malfunction when window is not visible

I'm using JS to make a simple function that displays 3 items one at a time. Works well when you're looking at the page, but when you minimize or change tabs then return, all three items are shown.
Anyone know why? It's as if fadeIn(x) keeps running but hide() stops working. I even checked with different classes.
Here is the code:
$(document).ready(function () {
function start() {
$(".featured-items").hide();
$( ".item-1" ).fadeIn('slow');
setTimeout(one, 5000);
}
function one() {
$(".featured-items").hide();
$( ".item-2" ).fadeIn('slow');
setTimeout(two, 5000);
}
function two() {
$(".featured-items").hide();
$( ".item-0" ).fadeIn('slow');
setTimeout(start, 5000);
}
setTimeout(start, 5000);
});
Problem solved, check the best answer below and make sure to read comments to get a good understanding. Thanks to all

(Updated to provide complete answer)
Your original code is too complex, and a more flexible and simpler implementation is to have just one function, and an array of items in the gallery. Secondly, you should modify your code so the fadeIn animation starts immediately instead of getting queued. Having only one function instead of several makes alterations such as this easier.
Note that in the code below, as in your original code, the various gallery items are classes rather than single element ids and could fade in multiple items.
var gallery = [ '.item-1', '.item-2', '.item-3' ];
var i = 0;
function galleryEvent() {
$(".featured-items").hide();
$( gallery[i] ).fadeIn({duration: 'slow', queue: false});
i = (i + 1) % gallery.length;
setTimeout(galleryEvent, 5000);
}
// start everything off....
galleryEvent();

Using complete option for jquery animate

I have a gif image in my html. I want to make the image "walk" so I'm using jquery .animate() the walking is fine, now, once it reaches the other side of the screen, I'd like to hide the image so I'm trying to use the complete option. My code looks like so:
$(document).ready(function() {
for(var i = 0; i < 500; i = i + 20) {
$("#animate-gif").animate({backgroundPositionX: i}, 50,
function() { alert("finished"); }); }
});
However, the alert does not show. I've also tried doing the following:
duration : 50, complete : function()
{backgroundPositionX: i}, {duration : 50, complete :function()
But neither worked and I'm getting a warning in my debugger "Unexpected token :". So my question is, how exactly do you add a complete option for the animate function in jquery? I've tried looking through the documentation and some examples and what i've tried are pretty much what I've seen.

I don't understand the purpose of the for loop. Try just calling animate() once:
http://jsfiddle.net/W5SjR/1/
$(document).ready(function() {
$("#animate-gif").animate({backgroundPositionX: "100%"}, 500, function() { alert("finished"); });
});
Your complete function looks fine. Is it possible that you checked "don't allow this page to show popups"?
I would also suggest using console.log() instead of alert().

the general syntax of .animate is
$("selector").animate({"param":"value","param","value"},time,callback_function);
The callback function will be called after the completion of the animation
there are also other options like "step", "complete" and much more
You can check this fiddle where i would used some of them

jQuery setInterval not looping

I have a function that I want to loop. I found the easiest way to do this was using setInterval. When I tried this the function only runs once. Please advise where I am going wrong. Cheers
function empMove() { $('.emp-wrap').css('margin-top', '-100px')};
setInterval(empMove, 2000);
I have a div with multiple rows and I want to show only one at a time, hence I am decreasing the margin-top each time.

The current code sets the top margin to -100px. Try
function empMove() { $('.emp-wrap').css('margin-top', '-=100')};

I highly recommend the jQuery timing plugin (2KB) (GitHub Repository, Docs).
It provides easy-to-use loop animations and much more. Have a look:
function empMove() {
$('.emp-wrap').css('margin-top', '-=100px').repeat().wait(2000);
};

function displayOnly() {
var initHeight = $('.wrapper').height();
$('.wrapper').height(initHeight);
$('p').not('.read').fadeOut(2000, function () {
if ($(this).is(':last-child')) {
$('.wrapper').animate({
height: $('.inner').height()
}, 2000);
}
});
}
$("button").click(displayOnly);
In action on fiddle

Using fade in/fade out with jquery

I am working over on of my student projects and I am new jquery, for the project I have to use jquery to enhance few function and I have learned much to carry out basic tasks, but I am stuck over something very confusing.
One my scripts actually changes the image of a div container at mouse over function, function is currently fine but make it feel a little beautiful I want to add transition affects to it either through fade in fade out functions or through animate but am unable to work it out with both. I searched over internet but here i am unable to relate those examples to mind here.
I just want to know where can I insert fade in fade out or animate function in this code, to give it a transitioning effect:
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
}, function () {
var dummyImg = $(this).attr("src");
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
});
});
Thank-you!

You want to access the callback function of the fadeIn and fadeOut functions, this will allow you to make changes to the src image and what not. it would look something like this ->
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
$(this).fadeIn('slow');
});
}, function () {
var dummyImg = $(this).attr("src");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
$(this).fadeIn('slow');
});
});
});

Maven,
Have you thought of using css webkit? This SO article goes into detail for crossfading images - at different rates. CSS Webkit Transition - Fade out slowly than Fade in
You can also make use of a basic event to fade-in/fade-out the image. This JQuery/JSFiddle SO article makes use of the this reference object: Jquery fadeOut on hover
The basic fade-in / fade-out structure from the JSFiddle.net documention is as follows:
$('#show').hover(function() {
$(this).stop(true).fadeTo("slow", 0);
}, function() {
$(this).stop(true).fadeTo("slow", 1);
});
~JOL

Personaly, I'd layer the two images (css) so the non-hover version is normally on top. Then
in the hover function, add a $(this).fadeOut('fast') so that the underlying image is displayed.

http://jsfiddle.net/Xm2Be/13/ There is an example how you could do that. Ofcourse, you can set lenght of fade effect by placing some number inside brackets. For examle .fadeToggle(5000) will have timing of 5 seconds.

jquery Fade In, Fade Out, Fade In 2

I'm done a bit of reading on here, but I'm posting because I can't seem to figure out specifically what I'm looking to do. I've tried tweaking existing code I've found here, but no such luck. It probably doesn't help that I'm not very well versed in javascript. I'm a recovering flash designer.
Let me explain:
I have 2 divs, one with a very large image, one with text. Ideally I'd like the webpage to function in this manner:
nothing on screen
fade in image div (and I think it might need some time to load first)
fade out image div
nothing on screen (ie: not a crossfade)
fade in text div
leave the image div there permanently.
Any thoughts on how to approach this would be much appreciated! Again, forgive my ignorance.

Since the image could be large, wire up the .load() event on the image which will be fired once the image has loaded successfully. From there just use the callback function in the .fadeOut() and .fadeIn() to show/hide your divs.
$(function() {
$(".image img").load(function() {
$(".image").fadeIn("slow", function() {
$(this).fadeOut("slow", function() {
$(".text").fadeIn("slow");
});
});
});
});
Code example on jsfiddle

$(document).ready(function(){
$('#id-of-img').fadeIn(5000).delay(5000).fadeOut(5000); // 5000 is 5 seconds, change this as you wish
$('#id-of-text').fadeIn(5000);
});
This requires jQuery 1.4.2 or above for the delay() function
-- edit --
Just re-read your question. You say "leave the image div there permanently', did you mean the text div? If so, what I've done should work, if not then I don't really know what you mean.

Using Event Callbacks
You want to load the image in a way that provides a callback when it has finished pre-loading:
var $textDiv = jQuery('.textDiv'); // contains the text
var img = new Image();
img.src = "images/myImageUrl.jpg";
img.onload = function() {
jQuery(this).hide().appendTo('.imgDiv').fadeIn(300, function(){
$(this).fadeOut(300, function() {
$textDiv.fadeIn(300);
}
});
};