We Keep Coding

wrap set time out function around simple slide animation jquery

I have a simple slide down function using jQuery where I'm simply animating an image to slide down. It works great. However I'm trying to reset the animation after it's ran, so it will continue on loop during the duration of the users session. I tried the below, but it didn't work as wanted, slide animation still ran, but not the sought effect of timing out and restarting. Thanks for any thoughts.
$(window).load(function () {
setTimeout(function(){
$("#man").show("slide", {
direction: "up"
}, 2000);
},500);
});

You can call a function after it completes the 2000ms transition.
Updated fiddle: http://jsfiddle.net/CqR9E/392/
$(window).load(function () {
setTimeout( go(),500);
});
function go(){
$("#man").show("slide", {
direction: "up"
}, 2000, function(){
$( "#man:visible" ).removeAttr( "style" ).fadeOut();
go();
});
}

Making this timer start with a button

I found this neat countdown timer and I was curious if someone could help with a few changes to it.
Start on the click of a button.
Where would I place an AJAX call function to a PHP file for when the timer hits 0?
Repeat when it is finished.
The timer I found is here: http://jsfiddle.net/johnschult/gs3WY/
var countdown = $("#countdown").countdown360({
radius: 60,
seconds: 20,
label: ['sec', 'secs'],
fontColor: '#FFFFFF',
autostart: false,
onComplete: function () {
console.log('done');
}
});
countdown.start();
$('#countdown').click(function() {
countdown.extendTimer(2);
});
Thanks in advance for any help given.

Here is how you could do that with just a little bit of modification. Check out the JSFiddle.
var countdown;
function initializeTimer(){
//Initialization
countdown = $("#countdown").countdown360({
radius: 60,
seconds: 20,
label: ['sec', 'secs'],
fontColor: '#FFFFFF',
autostart: false,
onComplete: function () {
//Place AJAX call here!
//Re-start the timer once done
initializeTimer();
startTimer();
}
});
//Call this, otherwise widget does not show up on the screen. Stop immediately after.
countdown.start();
countdown.stop();
}
//Manually invoke the first initialization
initializeTimer();
function startTimer(){
countdown.start();
}
$('#countdown').click(function() {
countdown.extendTimer(2);
});
//Start the timer on the button click
$('#start').click(function(){
startTimer();
});
You would put your code to call ajax inside the onComplete handler.
UPDATE: included code to re-start the process once complete and updated fiddle.

You nearly nailed it :)
Try that:
$('#start').click(function() {
countdown.start();
});
$('#extend').click(function() {
countdown.extendTimer(2);
});
Now you have two buttons, and both are functioning (one to start, the other to extend the timer for 2 seconds).
Here's the working code.
EDIT: #p e p's code gives more functionality like showing counter on the screen as soon as the script loads. Would go with his suggestion.

How can i delay a function

Can someone assist me on how I can delay this function?
$('#customer_quote').lightbox_me({
centered: true,
closeSelect: ".close",
onClose: function(){
$('div.error').remove()
}
})
});
I want this lightbox to open after 7 seconds.

Use setTimeout():
setTimeout(lightbox, 7000);
function lightbox() {
$('#customer_quote').lightbox_me({
centered: true,
closeSelect: ".close",
onClose: function(){
$('div.error').remove()
}
})
});
}

Give setTimeout a shot:
setTimeout(function() {
$('#customer_quote').lightbox_me({
centered: true,
closeSelect: ".close",
onClose: function() {
$('div.error').remove()
}
});
}, 7000);​

setTimeout(function(){
$('#customer_quote').lightbox_me({
centered: true,
closeSelect: ".close",
onClose: function(){
$('div.error').remove()
}
})
});
}, 7000);

Check this link out: To delay JavaScript function call using jQuery
Seems like you just use setTimeout with 7000

Use setTimeout.
var delayedFunction = function() {
/* your code */
}
setTimeout(delayedFunction, 7000);
The second argument stands for the number of miliseconds.
Note also that this evokes an asynchronous event. The execution of your code will not stop at the line with setTimeout for 7 seconds.
If you want to execute another code after this delay, you must do so in delayedFunction, when the event fires.

Second div to autoplayed always 1 sec after the first div

My question is how can I have #slider to be played always 1 second after #faded. Having it in 4 secs and 5 secs is not a stable way.
$(function(){
$("#faded").faded({
autoplay: 4000
});
});
$(function(){
$("#slider").faded({
autoplay: 5000
});
});

Is this what you want / need? It will fade in the first element after 4 seconds and when that is done, it will trigger a second timer after 1 second:
setTimeout(function() {
$('#faded').fadeIn('normal', function() {
setTimeout(function() {
$('#slider').fadeIn('normal');
}, 1000);
});
}, 4000);

Here is one problem you are facing:
$(function(){... this event happens before the page is render, thus creating inconsistencies in your code.
I would recommend that you change it to window.onload = function (){....
this should fix the problem.

delay() or timeout with stop()?

$('.file a').live('mouseenter', function() {
$('#download').stop(true, true).fadeIn('fast');
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
I want the mouseenter function to have a stop() and a delay of 1 second.
So, if I hover over #download the fadeIn should start after a 1 second delay. If I mouse out meanwhile the fadeIn shouldn't start. Get me?
I don't really know how to do that, any ideas?

You need to use setTimeout() in this case because of how .delay() works (and your inability to cancel it).
$('.file a').live('mouseenter', function() {
$.data(this, 'timer', setTimeout(function() {
$('#download').stop(true, true).fadeIn('fast');
}, 1000));
}).live('mouseleave', function() {
clearTimeout($.data(this, 'timer'));
$('#download').stop(true, true).fadeOut('fast');
});
You can give it a try here.
If you use .delay() it'll dequeue the next animation for the element, regardless of if you cleared that queue earlier. So you need a timeout that you can cancel, which the above does by manually calling setTimeout() and storing the result with $.data() so you can clear it later, via clearTimeout().

I was looking for the answer to a similar question, and I found that .animate() could also be used to handle this, and it obeys .stop()
It would look something like this:
$('.file a').live('mouseenter', function() {
$('#download')
.stop(true, true)
.animate({opacity:0}, 1000); // one second delay
.animate({opacity:1}, 'fast', 'swing');
}).live('mouseleave', function() {
$('#download')
.stop(true, true)
.animate({opacity:0}, 'slow', 'swing');
});

Use a setTimeout function
$('.file a').live('mouseenter', function() {
setTimeout(function(){
$('#download').stop(true, true).fadeIn('fast');
}, 1000);
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
setTimeout will execute the code inside the function after the specified miliseconds (in this case 1000).

you can use this on jquery without using delay event .
$('.file a').hover(function() {
time = setTimeout(function() {
$('#download').fadeIn();
},1000);
},function(){
clearTimeout(time);
});
1000 is your time that after it $('#download') will fade in .