Develop Reference

Content load only after fadeOut

I am trying to load content in between fadeOut and fadeIn.
If I try to run the following code the content loads before the fadeOut finishes:
$("#contentArea").fadeOut(1000);
$("#contentArea").promise().done();
$("#contentArea").load(content_map[$(this).attr('id')]);
$("#contentArea").fadeIn(1000);
I have tried to put a callback function in the fadeOut but still, the load inside that callback was called early. I tried to add a setTimeout after the fadeOut and it still didn't work.
I added the promise function (which is critical apparently), with or without a callback function holding the follow-up actions, but it did not work.
I will be happy to know how best to achieve this effect and if someone can also give me a tip as to why my other attempts failed it will be a wonderful bonus :)

The callback function should work, so I suspect you did it wrong. It should be:
$("#contentArea").fadeOut(1000, function() {
$(this).load(content_map[this.id], function() {
$(this).fadeIn(1000);
});
});

Wrapping all AJAX calls jQuery

I populate many parts of my website using
$("#theDivToPopulate").load("/some/api/call.php", callBackToBindClickEventsToNewDiv);
Where /some/api/call.php returns a built list, div, or some other HTML structure to place directly into my target div. The internet has been running slow lately and I've noticed that the time between a button click (which kicks off these API calls) and the div populating is several seconds. Is there an easy way to globally wrap all the load calls so that a div containing "Loading..." is displayed before the call is even made and hidden once the API call is complete.
I can not simply put the code to hide the div into the callBackToBindClickEventsToNewDiv as some load events have different call backs. I would have to copy the code into each function which is ugly and defeats the purpose. I want the flow of any .load to go as follows:
1) dispplayLoadingDiv()
2) Execute API call
3) Hide loading div
4) do callback function.
The loading div must be hidden first as the callback contains some animations to bring the newly loaded div in nicely.
EDIT:
Expanding on jacktheripper's answer:
var ajaxFlag;
$(document).ajaxStart(function(){
ajaxFlag = true;
setTimeout(function (e) {
if(ajaxFlag) {
hideAllDivs();
enableDivs(['loading']);
}
}, 500);
}).ajaxStop(function(){
ajaxFlag = false;
var load = $("#loading");
load.css('visibility','hidden');
load.css('display','none');
load.data('isOn',false);
});
This way loading is only displayed if the page takes more than 500 MS to load. I found the loading flying in and out real fast made things kind of choppy for fast page loads.

Use the following jQuery:
$(document).ajaxStart(function(){
$('#loader').show();
}).ajaxStop(function(){
$('#loader').hide();
});
Where you have an element called #loader that contains what you want to show when an AJAX request is being performed. It could be a span with text, an image (eg a gif), or anything similar. The element should be initially set to display: none
You do not even need to call the function anywhere else.

Try this
$("#someButtonId").click(function(e){
e.preventDefault();
$("#theDivToPopulate").html("Loading...");
$.get("/some/api/call.php",function(data){
$("#theDivToPopulate").fadeOut(100,function(){
$("#theDivToPopulate").html(data).fadeIn(100,function(){
//Do your last call back after showing the content
});
});
});
});

Fading in a div after a delay

I'm new to javascript so I'm struggling with the basics...
I'm using this delay to bring in a div but i want to fade the div in as part of this function (not just have the box appear)
function show() {
AB = document.getElementById('div_with_text');
AB.style.display = 'inline';
}
setTimeout("show()", 3000);
Can any one help with this?
I've tried adding things like:
$(function(){
$('#div_with_text').fadeIn('slow');
});
but I don't know the language well enough to get it to work...
Any help would be much appreciated!

Is your DIV hidden in the first place? If not, that is your problem. Your are trying to open an already opened door.
Your code is also incorrect, even if you hide the DIV, this will not work. It should have been setTimeout(show, 3000);
With the JavaScript code (setTimeout) you have provided, 3 seconds after the page loads, you are trying to display the DIV. Did you notice that the DIV was already there and never 'appeared' after 3 seconds as you expected?
Example - http://jsfiddle.net/BLPTq/2/ - just click run and see.
To make it work, hide the DIV first and then call the setTimeout or the jQuery method. Example - http://jsfiddle.net/zeXyG/ - just click run and see. Check the CSS display:none;
OR, if you don't want to hide it with CSS, just call hide() before calling fadeIn()
$('#div_with_text').hide().fadeIn('slow');
Example - http://jsfiddle.net/zeXyG/1/
As per your comment below. Add delay() to the call like shown below
$('#div_with_text').hide(); // this or use css to hide the div
$('#div_with_text').delay(2000).fadeIn('slow');
2 seconds after the page loads, this will hide the div and then fade in slowly. Look at this example carefully.

The fadeIn method will only work if you load the jQuery library on your page. Without that, the method will not work since it isn't part of native Javascript.
Once you have loaded jQuery, that method will work as your syntax is correct.

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

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.