Develop Reference

Showing text for a while

http://jsfiddle.net/639RF/
$("button").click(function () {
//#t holds 'X'
$('#t').fadeOut(1000).text('ZZ').fadeIn(1000);
$('#t').delay(1000);
$('#t').fadeOut(1000).text('YY').fadeIn(1000);
});
I'm trying to show some text for a while, then replacing it with some other text.
The way I was trying to do it ignores the first text I am trying to show, and replacing it with the last one from the beginning.
It should:
Fade 'X' out,
Fade 'ZZ' in,
hold for a second
Fade 'ZZ' out,
Fade 'YY' in.

Every time you call $("#t"), you are creating a new jQuery object. That object may have the same element, but it is still a different object with different properties.
Try this:
var t = $("#t");
t.fadeOut(1000,function() {t.text("ZZ")}).fadeIn(1000);
t.delay(1000);
t.fadeOut(1000,function() {t.text("YY")}).fadeIn(1000);
Edit again: Figured it out! You need to use the animation callback to handle things that aren't normally part of the animation queue.

You can use callbacks as a second parameter to fadeOut and FadeIn, also to wait for a second, you can also use the raw setInterval method.
$(document).ready(function () {
$("button").click(function () {
var $dom = $('#t');
$dom.fadeOut(1000, function(){ //first, fades out.
$dom.text('ZZ').fadeIn(1000,function(){ //changes the text to ZZ,
var $wait = setInterval(function(){ //wait for a second
clearInterval($wait); //prevent the loop of waiting
$dom.fadeOut(1000,function(){ //fadeout for a second
$dom.text('YY').fadeIn(1000); //change the text into YY, and fade in
});
},1000);
});
});
});
});
JSFiddle: http://jsfiddle.net/639RF/3/

How about this?
Note: feel free change the duration as you like.
Demo: JSFiddle
$(document).ready(function () {
$("button").click(function () {
$('#t').fadeOut(500, function(){ //fadeout in half a second and when complete
//fadein in half a second, wait for 2 seconds, when complete
$(this).text('ZZ').fadeIn(500).delay(2000).fadeOut(500, function(){
//fadein in half a second
$(this).text('YY').fadeIn(500)
});
});
});
});

jQuery $each fadeIn fadeOut

Everything works fine except one thing, I'd like it so when you have the .show class already visible, it will fade again when you click on another of the #c- divs.
http://jsfiddle.net/7KdR6/1/
$('[id^="c-"]').each(function(i){
$this = $(this);
$(this).text(i);
$(this).on('click',function(){
$('.show').fadeIn().text(i);
event.stopPropagation();
});
})
$(document).on('click', function(){
$('.show').fadeOut();
});

One of your problems is that you are not stopping the propagation because event is not being defined. You'll have to use the parameter for the click handler. Edit: Actually, it looks like event is automatically passed - I did not realize this before now. However, I still think it best to put the event object as the parameter if you are going to use it - jQuery does this in their examples and it makes it more obvious.
I also notice you are caching this but then not using that cached var. This means that every time you write $(this), it will have to rewrap that jquery object.
Then you can have a fadeOut and use the fadeIn as a callback for the fadeOut. This way if the .show element is already shown, it will fadeOut first. I'd write it like this:
$('[id^="c-"]').each(function (i) {
$this = $(this);
$this.text(i);
$this.on('click', function (event) {
event.stopPropagation();
$show = $(".show");
$show.fadeOut(function () {
$show.fadeIn().text(i);
});
});
})
Fiddle

You need to hide the element before using fadeIn on a visible element
$('[id^="c-"]').each(function (i) {
var $this = $(this);
$this.text(i);
$this.on('click', function () {
$('.show').hide().fadeIn().text(i);
event.stopPropagation();
});
})
Demo: Fiddle

Try calling .hide() before calling .fadeIn().
DEMO FIDDLE

jQuery Isotope queue shuffle/randomize animation

I would like to set the jQuery Isotope shuffle method to to perform an animated shuffle of the loaded DOM elements every 30 seconds that someone is on the page with the plugin loaded.
I have had success tying the animation to a .hover() event, but I cannot seem to get it to fire when I use setInterval() or .queue(). I want the animation to fire regardless of user interaction/input.
var iso_shuffle = function() {
$('#isotope').isotope('shuffle');
}
setInterval(iso_shuffle(), 2500);
Why does the previous code not trigger the randomization, yet this does:
$('#isotope').hover(function() {
iso_shuffle()
});
Cheers

iso_shuffle() calls the function immediately. The function returns nothing. So your setInterval is actually doing the equivalent of:
setInterval(undefined, 2500);
You want to use the function name as the callback for setInterval:
setInterval(iso_shuffle, 2500);

You need to pass the function itself, not its return value:
setInterval(iso_shuffle, 2500);

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