jQuery swap div on hover with delay - javascript

I'm trying to create two "buttons" that using the hover event, hide some divs and then display some others in their place. I'm then trying to delay the swapping back to the default div.
All works, fine, unless you go from one button to the other at which point you get many divs displaying at the same time until the delay passes. If we don't use the delay it works perfectly.
The javascript:
jQuery(function ($) {
$('#servers-btn').hover(
function() {
$('#servers, #servers-heading, #servers-arrow').show(0);
$('#default, #default-heading').hide(0);
},
function() {
setTimeout( function() {
$('#servers, #servers-heading, #servers-arrow').hide(0);
$('#default, #default-heading').show(0);
},1000)
}
);
$('#hosting-btn').hover(
function() {
$('#hosting, #hosting-heading, #hosting-arrow').show(0);
$('#default, #default-heading').hide(0);
},
function() {
setTimeout( function() {
$('#hosting, #hosting-heading, #hosting-arrow').hide(0);
$('#default, #default-heading').show(0);
},1000)
}
);
});
I assume i need to make one hover function aware of the other so it can cancel the timeout, i just have no clue how to do it.
EDIT - just tidyed up code to put all divs into one hide/show.
Also, i should have probably mentioned that the #default, #servers and #hosting divs appear in exactly the same location. So need to instantly switch at the same time (which the above does).
EDIT - latest attempt to use clearTimeout here http://jsfiddle.net/KH4tt/1/ - but can't quite make it work right.

You can use the .delay() function in jquery (I'm using Jquery 1.7.1 version) like the below example:
$(selector).delay(1000).hide("slow");

Try something like this
$('#servers-btn').hover(
function() {
$('#servers, #servers-heading, #servers-arrow').show(0);
$('#default, #default-heading').hide(1000, function() {
$('#servers, #servers-heading, #servers-arrow').hide(0);
$('#default, #default-heading').show(0);
});
}
);

Ok here's the final thing using the clearTimeout() function to cancel the setTimeout() that is used on mouseleave (hover handlerOut) that creates the delay:
jQuery(function($) {
var timeoutserver;
function canceltimeout() {
if (timeoutserver) {
window.clearTimeout(timeoutserver);
timeoutserver = null;
}
}
function closeServertime() {
timeoutserver = window.setTimeout(function() {
$('#servers, #servers-heading, #servers-arrow').hide(0);
$('#default, #default-heading').show(0);
}, 1000);
}
function closeHostingtime() {
timeoutserver = window.setTimeout(function() {
$('#hosting, #hosting-heading, #hosting-arrow').hide(0);
$('#default, #default-heading').show(0);
}, 1000);
}
$('#servers-btn').hover(
function() {
canceltimeout();
$('#servers, #servers-heading, #servers-arrow, ').show(0);
$('#default, #default-heading, #hosting, #hosting-heading, #hosting-arrow').hide(0);
}, function() {
closeServertime();
});
$('#hosting-btn').hover(
function() {
canceltimeout();
$('#hosting, #hosting-heading, #hosting-arrow').show(0);
$('#default, #default-heading, #servers, #servers-heading, #servers-arrow').hide(0);
}, function() {
closeHostingtime();
});
});

Related

Problems with mouseover and mouseout events in a continuous jQuery content slider

I have tried to built a continuous content slider in jQuery.
If you don't hover over it, then it works fine, it slides (even though I feel like I made it happen in a wrong way).
When you hover it then it stops, but only for 2 seconds. As you'd imagine, it should stay stopped until the cursor is removed. Maybe the interval is not cleared properly?
Generally the whole thing works improperly when you starts to hover/unhover.
Here's a demo of my plugin: http://jsfiddle.net/T5Gt3/
(function ($) {
$.fn.productSlider = function(options) {
var defaults = {
speed: 2000
};
var config = $.extend(defaults, options);
this.each(function() {
var $this = $(this),
$scrollable = $this.find('#content-product-slider-inner'),
timeLeft;
function animateScrollable() {
$scrollable.animate({ left: '-120px' }, config.speed, 'linear', function() {
$scrollable.css({ left: '0px' }).find('a:first-child').remove().appendTo($scrollable);
});
};
animateScrollable();
var timer = setInterval(animateScrollable, config.speed);
$scrollable.mouseover(function() {
$scrollable.stop();
clearInterval(timer);
});
$scrollable.mouseout(function() {
animateScrollable();
var timer = setInterval(animateScrollable, config.speed);
});
});
return this;
};
})(jQuery);
Any help would be greatly appreciated.
$(".event_list_inner_wrapper").live({
mouseenter: function () {
$(this).find('.front_side').fadeOut(600).hide();
$(this).find('.back_side').fadeIn(600).show();
},
mouseleave: function () {
$(this).find('.back_side').fadeOut(600).hide();
$(this).find('.front_side').fadeIn(600).show();
}
});
That's code I used for a project that was similar to your description. Basically, bind the mice events, and do your thing.

Delay before dragging in gridster

I'm using gridster.net in project, and i've run into problem.
I'm trying to get widgets start dragging only after a second of holding mouse after click. I'm using the next code:
$(".gridster .gs-w").on('mousedown', function(e) {
gridsterObj.disable();
dragTimeout = setTimeout(function() {
gridsterObj.enable();
}, 500);
}).bind('mouseup mouseleave', function() {
clearTimeout(dragTimeout);
});
but it didn't work. It seems that i have to call function of starting dragging, something like gridsterObj.on_start_drag.call(gridsterObj, e, ui);, but where can i get the UI object? It's used everywhere in gridster code, but i can't find where it created.
It seems that it jquery UI object. How can i create it?
You should be able to reference the UI object as $.ui or window.jQuery.ui.
So your code should look like this:
$(".gridster .gs-w").on('mousedown', function(e) {
gridsterObj.disable();
dragTimeout = setTimeout(function() {
gridsterObj.enable();
gridsterObj.on_start_drag.call(gridsterObj, $.ui);
}, 500);
}).bind('mouseup mouseleave', function() {
clearTimeout(dragTimeout);
});
I've ended with the next code:
$(".gridster .gs-w").on('mousedown', function(e, data) {
var self = this;
if (!data || !data.start) {
gridsterObj.disable();
dragTimeout = setTimeout(function() {
gridsterObj.enable();
$(self).trigger(e, [{ start: true }]);
}, 500);
} else {
$(self).addClass('dragging');
}
}).bind('mouseup mouseleave', function() {
clearTimeout(dragTimeout);
});
With that, gridster has delay 0.5 second before starting dragging.

Jquery : After completion of 'fade in' effect, wait for 'click' event

How can I wait for a click event ?
eg. I want that my <div> wait for 3 seconds after it's fade in, and if within 3 seconds the <div> is not clicked then it fade out.
I tried to give time 2 seconds in fadeOut but mouse click is not working it just fadeOut.
my .js file code:
$(document).ready(function () {
$(".arrow").hide()
$(".container").mouseenter(function () {
$(".arrow").fadeIn()
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000)
});
$(".arrow").click(function () {
$(".container").hide()
});
I'm not sure what you're trying to accomplish but your onClick handler isn't working because syntax is wrong.
Try this:
$(".arrow").on('click', function () {
$(".container").hide()
});
Also you seem to be missing the closing braces of the ready-function.
It should be like this:
$(document).ready(function () {
// Your code here
}); // Don't forget this line
Use a boolean to check if arrow has been clicked at the end of your time limit.
Example
$(document).ready(function () {
var clicked = false;
$(".arrow").click(function () {
clicked = true;
});
$(".container").hover(function () { // i put the two mouseenter, mouseleave functions into one hover(mousein, mouseout) function
$(".arrow").fadeIn();
setTimeout(function () {
if (clicked === false) {
$(".arrow").fadeOut(2000);
}
}, 3000);
}, function () {
$(".arrow").fadeOut(2000);
clicked = false; // i don't know if you want this or not. this resets everything on mouseout. if you want the .arrow thing to stay even after the mouse leaves .container, just get rid of this line
}); // .hover
}); // .ready
$(document).ready(function () {
var clicked = 0;
$(".container").mouseenter(function () {
$(".arrow").fadeIn();
setTimeout(function() {
if(clicked == 0) {
$(".arrow").fadeOut(2000);
}
},3000);
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000);
});
$(".container").click(function () {
clicked = 1;
});

Delay jQuery fadeIn due to unwanted behavior

How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});
a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});
Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();
Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/

Animate an Image after hovering an item a second

after some tries to get this to work, i ask you, if you know where my mistake is.
This is my code until now:
$(".menu a").hover( function () {
$(this).data('timeout', setTimeout( function () {
$(this).hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
i would be happy about some help.
I tried this but it doesn't work. one more information perhaps it will make it more clear. i had the function like this before:
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
it worked but so it will be viewed imidiately. so i found this to set a timer that it show the popup only after in this example one second:
$("#hello").hover( function () {
$(this).data('timeout', setTimeout( function () {
alert('You have been hovering this element for 1000ms');
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
both worked it self but if i put them together it does nothing
Inside the setTimeout callback, this does not refer to the hovered element.
To fix this, you need to make a separate variable in the event handler, like this: (pun intended)
$(".menu a").hover( function () {
var me = $(this);
me.data('timeout', setTimeout( function () {
me.hover(function() {
me.next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
me.next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
You don't need to use me inside the inner hover handlers, but you might as well.
Theres a nice plugin that does this: hoverIntent. Replace .hover with .hoverIntent, and you wont have to deal with setting and clearing the timeout manually.

Categories

Resources