We Keep Coding

Need to set a short timeout in JS … How To?

This is my JS Code:
$('#archive').click(function(){
$("#intro-page").slideUp(250);
$('#dapper').show();
$('#navigation').show();
$('.picture_holder_thumb').each(function(index) {
$(this).delay(50*index).fadeIn(400);
});
And I want to set a short timeout after the sliding up… The Intro-Page slides up, the wrapper (dapper) will be shown and then – Timeout – the .picture_holder_thumb fades in… How to I write this?

jQuery's .slideUp() method has a callback available when the animation completes.
.slideUp([duration] [, complete])
So,
$('#archive').click(function() {
$("#intro-page").slideUp(250, function() {
$('#navigation').show();
$('.picture_holder_thumb').each(function(index) {
$(this).delay(50 * index).fadeIn(400);
});
});
$('#dapper').show();
});
http://jqapi.com/#p=slideUp

jQuery Fade with delay

simple question why doesn't this code work?
<script>
function test( jQuery ){
$("#fade").delay(500).fadeIn(4000);
$("#fade2").delay(500).fadein(4000);
}
$( document ).ready( test );
</script>
Please keep in mind that i am new to jQuery
Thanks

The only possible reason I can think of is the element is not hidden initially - for fadeIn() to work the elements has to be hidden first.
So either hide it using script
function test(jQuery) {
$("#fade").hide().delay(500).fadeIn(4000);
$("#fade2").hide().delay(500).fadeIn(4000); //typo
//this can be shorten to
//$("#fade, #fade2").hide().delay(500).fadeIn(4000);
}
$(document).ready(test);
or using css
#fade, #fade2 {
display: none;
}

delay() pauses chains of methods in the queue. You could also try raw setInterval instead:
function test(){
var animation = setInterval(function(){
//whatever here is run after 500 ms
$("#fade").fadeIn(4000);
$("#fade2").fadein(4000);
clearInterval(animation); //we prevent the loop so it only runs once
}, 500);
}
$(document).ready(test);
Or something like this so you won't need to type document ready event for each method:
function test(){
var animation = setInterval(function(){
//whatever here is run after 500 ms
$("#fade").fadeIn(4000);
$("#fade2").fadein(4000);
clearInterval(animation); //we prevent the loop so it only runs once
}, 500);
}
$(document).ready(function(){
//I like this approach better.
test();
});

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

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.

Adding delay to jquery event on mouseover

I am trying to add a simple delay to a mouseover event of a child and having difficulties. (Still learning!)
This enables me to show the popup after a delay, but shows all of them simultaneously:
onmouseover='setTimeout(function() { $(\".skinnyPopup\").show(); }, 600)'
and this works to show only the popup I want with no delay:
onmouseover='$(this).children(\".skinnyPopup\").show()'
but the combination does not:
onmouseover='setTimeout(function() { $(this).children(\".skinnyPopup\").show(); }, 600)'
Any help would be appreciated. Thanks!

You need to define what this is when it executes, something like this would work:
setTimeout($.proxy(function() { $(this).children(".skinnyPopup").show(); }, this), 600)
Or just use .delay(), like this:
$(this).children(".skinnyPopup").delay(600).show(0);
Both of the above are quick fixes, I suggest you move away from inline handlers and check out an unobtrusive method (see this answer by Russ Cam for some great reasons), for example:
$(function() {
$('selector').mouseover(function() {
$(this).children(".skinnyPopup").delay(600).show(0);
});
});

It's because this is bound to the global context, not the element. Use something like the following instead:
// put this in your document head -- replace element with a selector for the elements you want
$(function () {
$(element).bind("mouseover", function () {
var e = $(this);
setTimeout(function () { e.children(".skinnyPopup").show(); }, 600);
});
});
If you're adamant about inline event handlers, the following should also work:
onmouseover='var self = this; setTimeout(function() { $(self).children(\".skinnyPopup\").show(); }, 600)'