Develop Reference

Display the image preview only when the mouse is hovered after 1 sec delay

I am showing the image preview when hovering over the image. Now I do keep the interval before displaying the preview image. say I set the delay as 1 sec, and within this if I dragged the mouse out of image, it still displays the preview since it is triggered during the mouse enter . How to fix this?
I need to display a preview only on hover after 1sec delay and not if the mouse is not with in the image?

On jQuery 1.9+, you could use delay/finish:
DEMO jsFiddle
$("#preview").hover(function(){
$("img").delay(1000).show(0); // passing 0 to show() will put animation in queue
}, function(){
$("img").finish().hide(); // finish() will clear any previous delay(), despite what argues the DOC
});

A basic skeleton using setTimeout() can be
var timer;
$('img').hover(function () {
timer = setTimeout(function () {
//do your stuff here
$('div').show();
timer = undefined;
}, 1000);
}, function () {
if (timer) {
clearTimeout(timer);
timer = undefined;
} else {
//hide the preview
$('div').hide();
}
})
Demo: Fiddle

Assign the setTimeout to a variable on mouseover event like this:
var timer = setTimeout(function() { doSomething(); }, 1000);
And then clear it on mouseout event so it doesn't show when you hover out of it:
clearTimeout(timer);

Delay Javascript hover action

I have an image on my site that has a jquery hover action assigned to it. But it's easy to accidentally mouse over that area, and if you do it more than once, the hover keeps appearing, disappearing, appearing, etc, until it's shown and disappeared once for every time you moused over it. Is there a way to make it so the action doesn't fire unless you hover for a few seconds? I don't want to just delay the action, because it would still happen for every mouseover, I want to see if there's a way the mouseover doesn't count unless you're on the image for a few seconds.
Script so far:
$("img.badge").hover(
function() {
$("h3.better").animate({"left": "125px"}, 1200);
},
function() {
$("h3.better").animate({"left": "-500px"}, 800);
});

You could use setTimeout to launch the action and bind a function calling clearTimeout on the mouseout event :
$('img.badge').hover(function(){
window.mytimeout = setTimeout(function(){
$("h3.better").animate({"left": "125px"}, 1200);
}, 2000);
}, function(){
clearTimeout(window.mytimeout);
});
Or you could use a plugin for that, like hoverintent.

Use a .stop() before animate, to cancel the previous animation. I believe this is what you are looking for, and will solve your current problem.
$("img.badge").hover(
function() {
$("h3.better").stop().animate({"left": "125px"}, 1200);
},
function() {
$("h3.better").stop().animate({"left": "-500px"}, 800);
});

You can use a timer to not fire the hover action until you've been hovered a certain amount of time like this and then, if the hover leaves before the timer fires, you clear the timer so nothing happens if you're only hovered a short period of time:
$("img.badge").hover(function() {
var timer = $(this).data("hover");
// if no timer set, set one otherwise if timer is already set, do nothing
if (!timer) {
// set timer that will fire the hover action after 2 seconds
timer = setTimeout(function() {
$("h3.better").stop(true).animate({"left": "125px"}, 1200);
$(this).data("hover", null);
}, 2000);
// save timer
$(this).data("hover", timer);
}
}, function() {
var timer = $(this).data("hover");
if (timer) {
clearTimeout(timer);
$(this).data("hover", null);
} else {
// probably would be better to make this an absolute position rather
// than a relative position
$("h3.better").stop(true).animate({"left": "-500px"}, 800);
}
});
Note: I also added .stop(true) to your animation so animations will never pile up.

menu should hide when not being hovered over with timeout

What I am trying to accomplish is having a menu that will show up when a "button" is clicked (the button and menu are in separate elements so the mouse is not hovering over the menu initially).
The menu should hide itself if it is not hovered over within the duration of the timeout (currently it does this, but only the first time it is clicked).
Also, if the element gets hovered over, I would like hide on mouseout and clear the timer and clicking the button again would reset the timeout (it is not resetting maybe?).
I have tried several incarnations and nothing I have tried has behaved correctly and am looking for advice. This his is what I am currently using:
var mytimer = window.setTimeout(function() {$('.menu-div').slideUp(function() {
window.clearTimeout(this.mytimer);
})
}, 5000);
$().ready(function(){
$('#menu-button').click(function () {
$('.menu-div').slideDown();
$(mytimer);
});
$('.menu-div').mouseenter(function() {
window.clearTimeout(this.mytimer);
});
$('.menu-div').mouseout(function() {
$('.menu-div').slideUp(200);
});
});

I think you want something like this (just a guess, because you didn't give any HTML)
$(function(){
var mytimer=0;
$('#menu-button').click(function () {
$('.menu-div').slideDown();
mytimer = setTimeout(function(){
$('.menu-div').slideUp();
}, 5000);
});
$('.menu-div').mouseenter(function() {
clearTimeout(mytimer);
});
$('.menu-div').mouseleave(function() {
$('.menu-div').slideUp();
});
});
DEMO.

Show image after there is hover on a link for 1500ms

I want to show an image after there is hover on link for atleast 1500ms or there is a click. How can I implement this minimal period hover condition while showing up the image ?
The image should remain visible until there is hover on the link or on itself. & should disappear as the mouse moves out of both. How can I implement this ? Thanks in advance!

http://jsfiddle.net/sSBxv/
$('a').click(function() {
alert(1); // alert on click
})
.hover(function() { // when mouse is entering
var $this = $(this);
// set timeout, save timeout id on element to clear later
$this.data('timeout', setTimeout(function() {
$this.click(); // click after 1500ms
}, 1500));
}, function() { // when mouse is leaving
clearTimeout($(this).data('timeout')); // stop the timeout
});

Try this
var hoverTimer;
$("linkSelector").hover(function() {
hoverTimer = setTimeout(function() {
$("imgSelector").show();
}, 1500);
}, function(){
clearTimeout(hoverTimer);
}).click(function(){
clearTimeout(hoverTimer);
$("imgSelector").show();
});

Something to the effect of...
$("#MyLinkSelectorId").hover(function() {
//Do anything you need to do here when it is clicked/hovered
setTimeout(function() {
//Do all of the other things here
}, 1500);
});
Switch out hover with click or bind multiple events to take care of both event types. To hide the images, you can either use a selector on the images with the .hide() method or you can set the opacity if the browser supports it.

$("a.class").hover( function (){ //First parameter is onmouseenter, show the image
$("img").show();
}, function (){ //second is onmouseleave, set a timeout that will hide the image
setTimeout( function(){
$("img").hide();
}, 1500);
}).click( function() { //on click, hide the image right away.
$("img").hide();
});

Since it looks like you haven't already tried something I'll give you the simplest way using jQuery (please note I haven't tested this):
$("#idOfDiv").mouseover(function() {
setTimeout("alertMsg()",1500);
});
function alertMsg()
{
alert('Ive been entered for 1500ms')
}
Also if you're serious about software development you should've been able to come up with this yourself.

stop the animation jQ

ive got the problem that i dont know how to stop my function with mouseover and restart it with mouseout
first here is my test-code:
<script type="text/javascript">
function fadeEngine(x) {
var total_divs=3; //setze hier die nummer der gewollten divs
var y=x;
if(x==total_divs) y=1; else y++;
$("#fade"+x).css("display","none");
$("#fade"+y).fadeIn("slow");
setTimeout('fadeEngine('+y+')',3000); //modifi alle 3000 miliseconds nen neuen div
}
fadeEngine(0); //Initialisation des Scripts
</script>
<script type="text/javascript">
$(document).ready(function(){
/*
$("#container").hover(function(){
stop('mouse over');
},function(){
alert('mouse out');
});
*/
/*
$("#container").hover(function()
{
$(this).stop().fadeTo("slow", 1.00);
},
function()
{
$(this).stop().fadeTo("fast", 0.50);
});
*/
});
</script>
</head>
<body>
<div id="container" style="width:200px;height:200px;background:#afafaf;color:#red;">
<div id="fade1">Content one</div>
<div id="fade2" style="display:none">Content two</div>
<div id="fade3" style="display:none">Content three</div>
</div>
<div class="blocker"> </div>
</body>
</html>
How i can do this to stop my function fadeEngine if im go over the contentdiv and start it if im move out of the div?
thanks a lot for help

Give all of your #fadeX elements a class (say .faders) and then use:
$('.faders').stop();
Or give the container div an id like #faderbox and say:
$('#faderbox div').stop();

I'm not sure exactly what you want to happen with regards to your fadeIn and fadeOut effects in your fadeEngine, however, I can give you two pieces of advice:
You can use the jQuery effect stop() to stop all current jQuery animations on selected elements. For example:
$("#fade"+y).stop();
Will stop the fading animation for that element in its current state. You can then reset the CSS if you wish.
To stop a function from being called that you previously queued with setTimeout, you must obtain the return value and call clearTimeout(). For example:
var timeout = setTimeout('fadeEngine('+y+')',3000);
// later...
clearTimeout(timeout);
This will clear the pending timeout event and prevent it from occurring.

If it's simply a case of attaching the animation to the mouse over bevahiour etc try this :
$(this).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;
// (we're using chaining) now animate
this.animate({
//some animation stuff
}, function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
this.animate({
//some animation stuff
}, function () {
// once the animate is complete, set the tracker variables
shown = false;
});
}, hideDelay);
});

Try applying the stop behaviour to each element that requires it e.g.
$('.faders').each(function () {
$(this).mouseover(function () {
$(this).stop();
});
});