Develop Reference

myWait(ms) in jQuery?

I want to extend the $.fn object in order to have a delay between my jquery commands :
like this working (and quite long) code :
$('.d').delay(1000).queue(
function ()
{
$(this).css('background-color', 'green');
$(this).dequeue();
}).delay(1000).queue(function ()
{
$(this).css('background-color', 'red');
$(this).dequeue();
});
a working sample is here : JSBIN
So I tried this :
My code at jsbin
$.fn.myWait = function (ms)
{
return this.queue(
function ()
{
var _self = this;
setTimeout(function ()
{
$(_self).dequeue();
}, ms);
})
};
invoking :
$('.d').myWait(1000).css('background-color', 'red').myWait(1000).css('background-color', 'green');
But it doesnt work.
What am I doing wrong ?
p.s.
I did read this similar solution, but if I remove the animation part and use only css , it also doesnt work.

The .css() does not get queued on the animation queue by itself, that's why you needed to put it in a callback in your first snippet. In the second snippet, it is called immediately (even though there's timeout waiting in the queue - just as like you called .delay()). Instead, you would need to use an .animate() call with a zero-duration.
For allowing the syntax which you wanted, you will need to take a step further. Have a look at the jQuery timing plugin and how their magic works.

I doubt you can do it in this way. You need to defer execution of those attribute changes, which means you shall store said code in individual functions.

Problems getting a jQuery .mouseenter()/.mouseleave() script with user interaction to work

Firstly, apologies for the title, I could not think of a suitable one.
I am unsure as to why the hide() function within the below code comes back erroneous in firebug when triggered, I am pretty sure the rest of the code will work fine once I have ironed this flaw out, any help/suggestions would be appreciated.
Firebug Console error:
hide is not defined
it-services() it-services (line 396)
time = setTimeout("hide()",3000);
Code I have thus far:
var time;
$("#form").mouseenter(function() {
clearTimeout(time);
$(this).delay(800).animate({
right: 0
}, 2000);
}).mouseleave(function() {
function hide() {
$(this).delay(800).animate({
right: "-325px"
}, 1000);
}
time = setTimeout(hide,3000);
});
Thank you all very much for any help in advance,
Dan.

You're declaring the hide() function after you invoke it using setTimeout. Simply put the declaration before the setTimeout call.
Also, when you pass a string of code as first argument to setTimeout, it gets evaled. eval is evil. Just pass the function object:
function hide() {
$(this).delay(800).animate({
right: "-325px"
}, 1000);
}
time = setTimeout(hide, 3000);

There are 2 issues in the new code
Inside the hide function, the context of $(this) is not same as the
when it is being called inside the mouseout function.
Secondly, the hide function is defined as an anonymous function inside the mouseout function
I feel it would make more sense if it were a function declared outside the mouseover event handling function. That way you can globally reference it from the setTimeOut as well as the mouseout event handler. Try the below code. I believe this should solve the issue, or at least take you a step ahead.
var time;
var $form;
$("#form").mouseenter(function() {
$form = $(this);
clearTimeout(time);
$(this).delay(800).animate({
right: 0
}, 2000);
}).mouseleave(function() {
hide();
time = setTimeout(hide,1000);
});
function hide() {
$form.delay(800).animate({
right: "-325px"
}, 3000);
}

How can I use jQuery to animate graphic loading?

Whats wrong in here?
$(document).ready(function(){
$(window).load(function(){$("#welcome").fadeIn(2000); })
setTimeout(function(){
$('div#welcome').fadeOut(2000);
}, 4000);
setTimeout(function(){
$('div#content').fadeIn(2000);
}, 6000);
setTimeout(function(){
$('div#menu').fadeIn(2000);
}, 8000);
});
It seems like something is not running as it should, as all functions will be called parallel.
In addition people tell me that my graphic will be loaded with a delay and will 'stick'.
I appreciate any help!

So, syntax-wise, there isn't a semi-colon at the end of the window.load event setter. You should add that.
However, I just ran your JS with a mock HTML set, and it worked fine. Not sure what you are experiencing. All three of the setTimeout calls will begin to run at the same time. So... rather than taking 18 seconds to run, they will all only take 8 seconds to run. It looks like that is what you wanted.
Here is the most efficient wait to write your code though:
$(document).ready(function(){
$(window).load(function(){
$("#welcome").fadeIn(2000).delay(2000).fadeOut(2000,function(){
$('div#content').fadeIn(2000,function(){
$('div#menu').fadeIn(2000);
});
});
});
});
Here, what will happen is that each of your animations will trigger the next animation, when they are complete.

I think you are looking for something like this.
$(document).ready(function(){
$("#welcome").fadeIn(2000, function(){
setTimeout(function(){
$('div#welcome').fadeOut(2000, function(){
setTimeout(function(){
$('div#content').fadeIn(2000, function(){
setTimeout(function(){
$('div#menu').fadeIn(2000);
}, 8000);
});
}, 6000);
});
}, 4000);
});
});

If you want to do something after something is finished you need to add another function after you set your parameter (2000 in this case).
I believe that you want to do something like this http://jsfiddle.net/Cp4Dx/

OP don't forget about Jquery's delay() function which can help you avoid setTimeout().
$(window).load(function(){$("#welcome").fadeIn(2000).delay(4000).fadeOut(2000)});

You can use the jQuery queue for it:
$(document).ready(function() {
$('#welcome').fadeIn(2000).delay(2000).fadeOut(2000);
$('#content').delay(4000).fadeIn(2000);
$('#menu').delay(6000).fadeIn(2000);
});
Demo: http://jsfiddle.net/ThiefMaster/9nPAR/

jQuery animate loop

I have a problem with animate loop. There is an object i want to move in a special way and do it in loop. Are there any native options to make it? I have this:
$(function () {
function runIt() {
$('#div').show("slow");
$('#div').animate({"marginLeft":"300px"},8000);
$('#div').animate({"marginLeft":"0px"},8000);
$('#div').hide("slow", runIt);
}
runIt();
});
But it seems not so pretty.

That's the proper way to queue animations. However, there's some things that can be made to your code to make it a bit snappier and prettier:
Store a reference to the selected element in a local variable to speed up execution (less queries made to the DOM)
Clean it up by removing unnecessary quotes for object properties
Sizing is measured in pixels per default so we can use pure integers instead
The named function can be replaced with a immediately invoked anonymous function and then use arguments.callee as the callback
Here's an example showcasing the above changes:
$(function () {
var element = $("#div");
(function(){
element
.show("slow")
.animate({ marginLeft: 300 }, 1000)
.animate({ marginLeft: 0 }, 1000)
.hide("slow", arguments.callee);
}());
});
You can also do it in a more advanced way by creating your own plugin to use custom queues. I created a small fiddle a while back when I was fooling around with animation queues.
More about immediately invoked function expression can be read on Ben "Cowboy" Alman's blog.

That is how I would do it. The only suggestion I would make is to use chaining for nicer code and so the jquery object doesn't get created every time.
$(function () {
function runIt() {
$('#div').show("slow")
.animate({"marginLeft":"300px"},8000)
.animate({"marginLeft":"0px"},8000)
.hide("slow", runIt);
}
runIt();
});

Call js-function using JQuery timer

Is there anyway to implement a timer for JQuery, eg. every 10 seconds it needs to call a js function.
I tried the following
window.setTimeout(function() {
alert('test');
}, 10000);
but this only executes once and then never again.

You can use this:
window.setInterval(yourfunction, 10000);
function yourfunction() { alert('test'); }

window.setInterval(function() {
alert('test');
}, 10000);
window.setInterval
Calls a function repeatedly, with a
fixed time delay between each call to
that function.

Might want to check out jQuery Timer to manage one or multiple timers.
http://code.google.com/p/jquery-timer/
var timer = $.timer(yourfunction, 10000);
function yourfunction() { alert('test'); }
Then you can control it with:
timer.play();
timer.pause();
timer.toggle();
timer.once();
etc...

setInterval is the function you want. That repeats every x miliseconds.
window.setInterval(function() {
alert('test');
}, 10000);

jQuery 1.4 also includes a .delay( duration, [ queueName ] ) method if you only need it to trigger once and have already started using that version.
$('#foo').slideUp(300).delay(800).fadeIn(400);
http://api.jquery.com/delay/
Ooops....my mistake you were looking for an event to continue triggering. I'll leave this here, someone may find it helpful.

try jQueryTimers, they have great functionality for polling
http://plugins.jquery.com/project/timers

You can use setInterval() method also you can call your setTimeout()
from your custom function for example
function everyTenSec(){
console.log("done");
setTimeout(everyTenSec,10000);
}
everyTenSec();

function run() {
window.setTimeout(
"run()",
1000
);
}