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

Show and hide content on hover with delay

I need to do one thing.
I have element on webside. When user hover the mouse on this item i need to for example display alert. But with delay: When user hover the mouse on item and after one second mouse is still on item the alert will display. I can do it but i want to do the same when mouse leave the same item (when mouse leave item and after one second is still outside item). Now i use this code but of course it dosen't work with leaving
$('.test').hover(function(){
mytimeout = setTimeout(function(){
alert("enter");
}, 1000);
}, function(){
clearTimeout(mytimeout);
});
$('.test').mouseleave(function() {
alert("escape");
});
Of course i'm not going to use this with alerts ;)
I have no idea how to do it. Hover in hover? Or use something else?
Thank you for your help and sorry for my english.

You'd need timeouts in both blocks, enter/leave, such as below:
var $demo = $("#demo");
var timer;
$('.test').hover(function() {
//Clear timeout just in case you hover-in again within the time specified in hover-out
clearTimeout(timer);
timer = setTimeout(function() {
$demo.text("enter");
}, 1000);
}, function() {
//Clear the timeout set in hover-in
clearTimeout(timer);
timer = setTimeout(function() {
$demo.text("exit");
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="test">Hover me!</button>
<div id="demo"></div>

You almost had it. The jquery hover function takes two parameters an onHoverStart (or onMouseOver) handler and an onHoverStop (or onMouseLeave) handler. You just need to add the alert to the onHoverStop handler.
$('#test').hover(function(){
setTimeout(function(){
alert("enter");
}, 1000);
}, function(){
setTimeout(function(){
alert("escape");
}, 1000);
});

Working fiddle.
You can follow the same idea in mouseleave if you want, you need just to clear the timer timer_mouseleave on hover event :
var timer_mouseleave;
$('.test').hover(function(){
clearTimeout(timer_mouseleave);
mytimeout = setTimeout(function(){
alert("enter");
}, 2000);
}, function(){
clearTimeout(mytimeout);
});
$('.test').mouseleave(function() {
timer_mouseleave = setTimeout(function(){
alert("escape");
}, 2000);
});
Hope this helps.

Try this one. Just need to reset timeout on each hover event.
(function(){
var mytimeout = null;
$('.test').hover(function(){
clearTimeout(mytimeout);
mytimeout = setTimeout(function(){
alert("enter");
},1000);
});
})();

How do I do 3 animations in jQuery and loop them? (Timing is messed up.)

I have a three different transitions for fading out and fading in my 3 images.
animate1 = function() {
$('#changingImage').fadeOut('fast', function() {
$('#changingImage').attr("src","../files/others/image1.jpg");
$('#changingImage').fadeIn('fast');
});
};
I have this same function two more times, just replacing the 1s with 2s and 3s.
I call my three functions with this, repeating every 5 seconds:
animate1().delay(5000);
animate2().delay(10000);
animate3().delay(15000);
I'm new at jQuery, and I don't understand why the timing is wrong. All that happens is image2 (the original) gets replaced with image1, and that's it.

Try using the setTimeout() javascript function.
Documentation: http://www.w3schools.com/jsref/met_win_settimeout.asp
For example:
setTimeout(function(){ animate1(); }, 5000);
setTimeout(function(){ animate2(); }, 5000);
setTimeout(function(){ animate3(); }, 5000);
This basically 'pauses' your JavaScript/jQuery code for 5 seconds before running the function and continuing.

.delay() does not repeat an event, it just delays its execution. You need .setInterval() if you want to repeat an event based on a given interval:
window.setInterval(function(){
setTimeout(animate1, 1000);
setTimeout(animate2, 500);
}, 5000);
Demo: https://jsfiddle.net/erkaner/bfb7jgaL/1/

Yay! I figured it out with a bunch of help.
var animations = function() {
setTimeout(function() {
animate1();
console.log("Animation 1")
}, 5000);
setTimeout(function() {
animate2();
console.log("Animation 2")
}, 10000);
setTimeout(function() {
animate3();
console.log("Animation 3")
}, 15000);
};
setInterval(animations, 15000);

Hi i have a suggestion for you in case that you have more than this 3 image so you will create a new function for it ?
so what about to use only 1 function that will call it self with an attribute that define image name as it is the only thing is changing every time so you can use this better and less code ,you have just the n value will change every time will increase and the max value witch define how many image you want
//if you want to set this animation for more than 3 image just change the max value
var max=3;
setTimeout(function(){ animate(2); }, 5000);
animate = function(n) {
$('#changingImage').fadeOut('fast', function() {
if(n<=max){
$('#changingImage').attr("src","http://www.imacros-scripts-for-free.is-best.net/image"+n+".jpg");
$('#changingImage').fadeIn('fast');
if(n==max){n=1}else{n++;}
setTimeout(function(){ animate(n); }, 5000);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="changingImage" src="http://www.imacros-scripts-for-free.is-best.net/image1.jpg" width="200px">

Automatically move div with javascript on delay

I have the below piece of code that moves a onto the screen when ?added is in the URL which works great. I now need to add a piece of code to it that then moves the back over after 5 seconds. I have noticed there's a delay function but I'm not sure how to add it into the code. Can anyone help? Many thanks!
$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
$('#popout-left-menu-container')
.animate({
'right': '2px'
}, 300);
};
});

You can use the setTimeout function to delay something in javascript. Maybe like this:
$('#popout-left-menu-container').animate({'right':'2px'},300);
setTimeout(function(){
//This is animation that runs after 5 seconds. You can use it to move the block back.
//You have to set your parameters yourself here
$('#popout-left-menu-container').animate({'right':'0px'},300);
}, 5000);

$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
setTimeout(function(){
$('#popout-left-menu-container')
.animate({
right:'2px'
},300);
},5000);
};
});

You should do it with .delay().
$("query").animate(firstAnimation, firstDuration).delay(milliseconds).animate(secondAnimation, secondDuration);

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 .