We Keep Coding

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

How to clear setTimeout on jQuery mouseover #id

This is my current code to run the series of setTimeout functions. How do I stop these when either the mouse moves, or is over a certain element?
$( document ).ready(function() {
clicky()
function clicky() {
setTimeout(function () {jQuery('#1500').trigger('click');}, 3000);
setTimeout(function () {jQuery('#1990').trigger('click');}, 6000);
setTimeout(function () {jQuery('#2010').trigger('click');}, 9000);
setTimeout(function () {jQuery('#battle').trigger('click');}, 12000);
setTimeout(function () {
jQuery('#water').trigger('click');clicky()
}, 15000);
}
});

You essentially need to save a reference to your timeouts so that they can be cleared when you need them to be. In the following example, I just used an object so that you could specify which timeout you wanted to affect, if desired.
Here's a working fiddle that will clear the timeouts on hover, then reset them when the mouse leaves: http://jsfiddle.net/6tQ4M/2/
And the code:
$(function(){
var timeouts = {};
function setTimeouts () {
timeouts['#1500'] = specifyTimeout('#1500', 3000);
timeouts['#1990'] = specifyTimeout('#1990', 6000);
timeouts['#2010'] = specifyTimeout('#2010', 9000);
timeouts['#battle'] = specifyTimeout('#battle', 12000);
timeouts['#water'] = specifyTimeout('#water', 15000, function(){
console.log('reset the timeouts');
clearTimeouts();
setTimeouts();
});
}
function clearTimeouts () {
for(var key in timeouts){
if(timeouts.hasOwnProperty(key)){
clearTimeout(timeouts[key]);
delete timeouts[key];
}
}
}
function specifyTimeout (id, time, callback) {
return setTimeout(function(){
$(id).trigger('click');
if(callback){
callback();
}
}, time);
}
$('a').on('click', function(){
$('#projects').append('clicky clicky!');
});
$('#map').on('mouseover', clearTimeouts);
$('#map').on('mouseleave', setTimeouts);
setTimeouts();
});
Let me know if you have any questions about the code at all!

Your setTimeout needs to be defined to a variable, so that it can be cleared by passing to clearTimeout(). Something like:
var interval = setTimeout(function() {
//msc
}, 8000);
window.clearTimeout(interval);

Well, according to what you ordered, when you hover an area, the setTimeOut should be fired, and when you are out of this region, the setTimeOut should be reset.
This is the code:
HTML
<div id="map"></div>
CSS
#map{
width:100px;
height:100px;
background-color: black;
}
Javascript
var timeoutHandle;
$('#map').mouseover(function(event){
window.clearTimeout(timeoutHandle);
});
$('#map').mouseout(function(event){
timeoutHandle = window.setTimeout(function(){ alert("Hello alert!"); }, 2000);
});
Basically you should keep a reference to the setTimeOut, in this case the variable is timeoutHandle, call clearTimeOut on mouse over and call setTimeOut again to reset the timer.
Here is the jsFiddle:
http://jsfiddle.net/bernardo_pacheco/RBnpp/4/
The same principle can be used for more than one setTimeOut timer.
You can see more technical details here:
Resetting a setTimeout
Hope it helps.

How to continuously bounce an object when site is live

I am new to JavaScript and jQuery. I have trouble in my new project. I want to need a image is bouncing. I got a script from net. But This function is only for jumping on the click.I want its jumping when the site is loaded. Please help me.
Link http://www.tycoonlabs.com/help/bouncing%20-%20Copy.html
This is my script
<SCRIPT>
$(function(){
$('#bouncy1').click(function () {
$(this).effect("bounce", { times:5 }, 300);
});
});
</SCRIPT>
Thanks and Regards

If you want to have it bounce while something is happening and then stop it, you could use setInterval
var interval = setInterval(function(){
jQuery('#someId').effect('bounce', {times: 5}, 300);
}, 500); // every half second
// Do some stuff to load up your site;
clearInterval(interval); // Stop the bounce interval
You may want to adjust the times parameter and the delay to meet your needs and effect.

Try this:
<script>
$(function(){
function bounceObject(obj)
{
obj.effect("bounce", { times:5 }, 300);
}
bounceObject($('#bouncy1'));
$('#bouncy1').click(function () {
bounceObject($(this));
});
});
</script>

this works well
function bounce(){
$('#test').effect( "bounce", "slow", bounce);
}
bounce();
http://jsfiddle.net/xGe2D/