We Keep Coding

setTimeout/pausing/ etc

I've tried a few different ways except the right one.
Trying this:
setTimeout( function() {
$('.historyTextBoxes p')
.bind('showText', function(e) {
$(this).fadeIn(800, function(){
$(this).next().length && $(this).next().trigger("showText");
});
}).eq(0).trigger('showText');
}, 4000);
Will wait for 4 seconds, then fade each paragraph in, one after another at the speed of .800 miliseconds.
What I want to do is fade a paragraph in at .800 ms, then wait for 4 seconds before the next paragraph fades in.
The basic set-up of:
$('.historyTextBoxes p')
.bind('showText', function(e) {
$(this).fadeIn(800, function(){
$(this).next().length && $(this).next().trigger("showText");
alert('pause here');
});
}).eq(0).trigger('showText');
works but I've yet to hit the right syntax to make it pause where the alert is.
I tried throwing a call to a function but I don't need to run anything except just to wait.
So in pseudo code, I'm trying to define something like:
function wait() {
pause(for 4 seconds);
}
Then I could just call that function instead of the alert above. My issues with setTimeout has been 'having' to define a function but I'm over thinking something.

Using setTimeout was correct, but you applied it in the wrong place.
$('.historyTextBoxes p').bind('showText',function(e) {
$(this).fadeIn(800,function(){
// this is the callback after the fadein
// here we want to wait (use a timeout)
var next = $(this).next();
if (next.length)
setTimeout(function() {
// before the next text is shown
next.trigger("showText");
}, 4000);
})
}).eq(0).trigger('showText');

This should do it:
function showAll() {
var p = $('.historyTextBoxes p').get(); // array of elements
(function loop() {
if (p.length) {
var el = p.shift();
$(el).fadeIn(800).delay(4000).promise().done(loop);
}
})();
}
demo at http://jsfiddle.net/4dNr3/2/
Note that this uses no explicit timers at all, and nor does it use any events to trigger the next phase - it relies on the animation queue for all timing. Note that it's not generally a good idea to mix timers and animation unless you can guarantee that they're interleaved rather than running in parallel. In this case that's OK, though.

Jquery css(width, 0) not working if the element is hidden

I have created a quick jsfiddle here showing it not working.
The problem I have is with the slide up. I want it to work so that it only sets the width to 0 after the slideup has finished. The obvious callback function does not seem to be getting called after the slideup has finished.
I would like it to work like this:
Shows the red box by sliding down and increasing the width together.
Click again and the box slides up then sets the width the 0. So that if the user clicks the button again the first animation would appear the same.
var $foo = $("#elm");
$("#btn").toggle(function() {
showDropDown();
}, function() {
hideDropDown();
});
function showDropDown(){
$foo.slideDown({duration:500, queue:false}).animate({"width": 400}, 250);
}
function hideDropDown(){
$foo.slideUp({duration:800, queue:false},function(){
$foo.css({"width": 0});
});
}
UPDATE:
The strange thing is that if I add a alert() into the callback function for slidedown it never gets called.

Edit: Sorry for the first answer, didn't pay attention.
The problem is that the callback is not executed, because you don't give the parameters according to the API, and the callback is not "wired" in.
Instead, you can use the promise().done(...) combination to achieve the objective you wanted.
So, you should modify your hideDropDown method as follows:
function hideDropDown(){
$foo.slideUp({duration:800, queue:false}).promise().done(function(){
$foo.css("width", "0px");
});
}
From the jQuery docs:
"The .promise() method returns a dynamically generated Promise that is resolved once all actions of a certain type bound to the collection, queued or not, have ended."

Maybe you just need to use animate to reset width to 0 like this:
var $foo = $("#elm");
$("#btn").toggle(function() {
showDropDown();
}, function() {
hideDropDown();
});
function showDropDown(){
$foo.slideDown({duration:500, queue:false}).animate({"width": 400}, 250);
}
function hideDropDown(){
$foo.slideUp({duration:800, queue:false}).animate({"width": 0}, 1);
}
or set width to 0 like this:
function hideDropDown(){
$foo.slideUp({duration:800, queue:false}).width(0);
}

Why not chain .animate() after .slideUp()?
$foo.slideUp({duration: 800, queue: false}).animate({"width": 0}, 800);

How to block JQuery actions while a previous action is still taking place

I have a a div in a page that slides up on hover, and then back down on hover out. If you were then to hover in and out on the item, then all the actions will be queued and thus triggered, causing the object to keep sliding up and down even though you are no longer interacting with it.
You can see this in action on the site I am developing here. Simply hover over the large image in the center to see the information div to appear.
Ideally what should happen is that while an animation is taking place no further actions should be queued.
Here is my current code:
$(document).ready(function(){
$(".view-front-page-hero").hover(
function() {
$hero_hover = true;
$('.view-front-page-hero .views-field-title').slideDown('slow', function() {
// Animation complete.
});
},
function() {
$hero_hover = false;
$('.view-front-page-hero .views-field-title').slideUp('slow', function() {
// Animation complete.
});
}
);
});

Create a global variable. When the animation starts. Clear it when it completes. Set a condition to exit the function if this variable is set before calling the animation.

This is probably not the best solution, but if you run stop(true, true) before the animation, it should work.
Live demo: http://jsfiddle.net/TetVm/

$(document).ready(function(){
var continue=true;
$(".view-front-page-hero").hover(
function() {
if(continue){
$('.view-front-page-hero .views-field-title').slideDown('slow', function() {
continue=false;
});
}
},
function() {
if(continue!){
$('.view-front-page-hero .views-field-title').slideUp('slow', function() {
continue=true;
});
}
}
);
});
//this will make your code work correctly...

jquery delay altering css

I am trying to reset some css but with a delay after the click. For some reason the delay seems to be getting ignored. Any ideas?
$("#closeMe").live("click", function() {
$("#selectContainer").fadeOut( function() {
scrollerPos = 1
$(".scroller").delay(3000).css({"margin-left":"0px"});
$("#selectContainer img").delay(3000).css({"background-color":"#FFF"});
$("#selectContainer img:eq(0)").delay(3000).css({"background-color":"#000"});
});
});

I don't believe css participates in the effect stuff, so it won't be aware of the queue. From the delay docs:
Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.
Pretty sure css is on that list too.
No problem, though; you can do this:
$("#closeMe").live("click", function() {
$("#selectContainer").fadeOut( function() {
scrollerPos = 1
setTimeout(function() {
$(".scroller").css({"margin-left":"0px"});
$("#selectContainer img")..css({"background-color":"#FFF"});
$("#selectContainer img:eq(0)").css({"background-color":"#000"});
}, 3000);
});
});

Use setTimeout() instead of .delay()
setTimeout(resetCSS, 3000);
function resetCSS() {
$(".scroller").css({"margin-left":"0px"});
$("#selectContainer img").css({"background-color":"#FFF"});
$("#selectContainer img:eq(0)").css({"background-color":"#000"});
}

Try
setTimeout(function(){
$(".scroller").css({"margin-left":"0px"});
$("#selectContainer img").css({"background-color":"#FFF"});
$("#selectContainer img:eq(0)").css({"background-color":"#000"});
},3000);

quote from .delay()
Only subsequent events in a queue
are delayed;
the .css() method does not use the queue.
You need to use a timeout
$("#closeMe").live("click", function() {
$("#selectContainer").fadeOut( function() {
scrollerPos = 1
setTimeout(function(){
$(".scroller").delay(3000).css({"margin-left":"0px"});
$("#selectContainer img").delay(3000).css({"background-color":"#FFF"});
$("#selectContainer img:eq(0)").delay(3000).css({"background-color":"#000"});
});
});
});

css is not an animated function. It cannot be delay ed.
You can use animate for that:
$(".scroller").delay(3000).animate({"marginLeft":0}, 0);
But it only works with numeric properties, not background-color. For that you can use jQuery UI animate:
The jQuery UI effects core extends the animate function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties:
backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
color
outlineColor

jQuery Delaying Queue

I want to delay things like the css from happening but this method wont work. Any ideas on how I can delay tasks.
$(function() {
$('.btn').click(function() {
$('.divOne').animate({"left": "+=400px"}, "fast").delay(800).css("background-color","yellow");
});
});

You can use .queue() to stick it on the default animation (fx) queue, like this:
$('.btn').click(function() {
$('.divOne').animate({"left":"+=400px"}, "fast").delay(800).queue(function(n) {
$(this).css("background-color","yellow");
n(); //call next function in the queue, needed if you animate later!
});
});
You can test it here, all this does is stick it in the fx queue using .queue(function(n)), the n is the next function in the queue, so we're calling it, for example if you didn't do this and added any animation after it, it just wouldn't run, because the next function or .dequeue() isn't called.

Maybe use a callback function on the animate. Once the animation is complete use a setTimeout()
$(function() {
$('.btn').click(function() {
$('.divOne').animate({"left": "+=400px"},"fast", function() {
var $elem = $(this);
setTimeout(function() {
$elem.css('background-color','yellow');
}, 800);
})
});
This might not be syntactically perfect.