I am working on a website and want to modify the current code for a dropdown menu item. Here is the current code:
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(300);
},
function () {
//hide its submenu
$('ul', this).slideUp(300);
}
);
});
I tried changing the code to add a timeout with the intention of setting the timeout when the user took their mouse off of the menu so the menu didn't toggle the slide up effect right away. The desired effect that I want is that if the user takes their mouse off the menu for like 200 ms but then moves it back to the menu it doesn't do anything. So the menu waits like 300-400 ms to toggle the slide up function. Here is the code that I wrote that didn't work. Part of it was because of the this in $('ul', this).slideUp(250); Anyways, here is the code that I tried to implement that didn't work:
$(document).ready(function () {
var timeoutID;
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(250);
window.clearTimeout(timeoutID);
timeoutID = window.setTimeout(SlideUp, 350);
},
);
function SlideUp() {
//hide its submenu
$('ul', this).slideUp(250);
}
});
What is the best way to have the program wait to toggle the slideup function? Any ideas are appreciated. Thanks.
This is what you wanted to do.
$(document).ready(function () {
var timeout;
$('#nav li').hover(function () {
//show its submenu
clearTimeout(timeout);
$('ul', this).slideDown(300);
}, function () {
//hide its submenu
var self = this;
timeout = setTimeout(function(){
$('ul', self).slideUp(300);
}, 300);
});
});
jQuery.Deferred(), introduced in version 1.5, is a chainable utility
object that can register multiple callbacks into callback queues,
invoke callback queues, and relay the success or failure state of any
synchronous or asynchronous function.
Take a look at this.
Not an answer to your specific question, but I would use transition-delay if possible, fiddle.
Related
I have a mega menu that uses the hoverintent to delay the drop down, I have also set up a lightbox effect for the menu, however the code uses mouseenter and mouseleave, the problem is that whilst the drop down has a delay the lightbox effect doent, so as soon as the mouse passes over the lightbox is triggered. Is there any way that the code below can be changed to use hoverintent instead of mouseenter/mouseleave?
<script>
$(document).ready(function() {
if (document.documentElement.clientWidth > 801) {
$("#mega-menu").mouseenter(function() {
$("#mm-nav-overlay").toggle();
}).mouseleave(function () {
$("#mm-nav-overlay").hide();
});
}
});
</script>
Many Thanks
So I opted in the end to replace the code above with:
$(document).ready(function() {
if (document.documentElement.clientWidth > 801) {
$("#mega-menu").mouseenter(function() {
timer = setTimeout(function(){
$("#mm-nav-overlay").toggle();
},200/* <--- the delay */)
}).mouseleave(function () {
clearTimeout(timer);
$("#mm-nav-overlay").hide();
});
}
});
I have added setTimeout for 3 seconds in this hover functionality as per requirement now i am facing below issue while hovering over sub-navs:
-> When you hover over the sub-navs in sequence, the previous sub-navs remain, making it
impossible to click on any of them.
Is there any way to remove this overlapping of sub-navs when you hover over new main navs? But still i want 3 second stopage when we remove mouse from main nav so that i can get time to select subnavs?
Example: http://design1.advisorproducts.com/home
Below is ths JQuery code:
$(function () {
$("ul.dropdown li").hover(function () {
var timeout = $(this).data("timeout");
if(timeout) clearTimeout(timeout);
$(this).addClass("hover");
$('ul:first', this).css('visibility', 'visible');
}, function () {
$(this).data("timeout", setTimeout($.proxy(function() {
$(this).removeClass("hover");
$('ul:first', this).css('visibility', 'hidden');
}, this), 600));
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
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/
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(220);
},
function () {
//hide its submenu
$('ul', this).slideUp(220);
}
);
Hello,
I want to set a "delay" on my dropdownmenu, because the respond time is too fast. When I accidently hover 4times in a row(it slides up and down al the time).
I read and tried the HoverIntent jquery plugin. But I am not able to implement it with this easy jquery menu.
Is there anybody with such experience?
I would really be thankful, I tried to implement it but without success (I am bad at jquery). Please give some hint/code, thank you!
You have to stop the currently running animation. Try this,
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).stop().slideDown(220);
},
function () {
//hide its submenu
$('ul', this).stop().slideUp(220);
}
);
Try the following to prevent the hover function firing to many times.
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).stop().slideDown(220);
},
function () {
//hide its submenu
$('ul', this).stop().slideUp(220);
}
);
I'm doing animated menu with jQuery (3 levels). I'm using efects slideDown and slideUp. Sometimes (but no always), when I open submenu of first main item, submenu of second main item won't work until I refresh the page. It works OK with efects fadeIn and fadeOut, but I want to use slide.
Here is my code: http://jsfiddle.net/mcCAx/
The problem was the styling on your <ul class="SubStage"> element was being overridden. So, fight fire with fire by re-overwriting the styling in a callback. Your side menu shows up every time. :)
$(document).ready(function()
{
$('li.MainStage').hover(
function()
{
$(this).find('ul.SubStage').slideDown('slow',function(){
$(this).parent().find('ul.SubStage').css({overflow:"visible"});
});
},
function()
{
$(this).find('ul.SubStage').stop().slideUp('slow');
});
$('li.SubStage').hover(
function()
{
$(this).find('ul.Sub2Stage').slideDown('slow');
},
function()
{
$(this).find('ul.Sub2Stage').stop().slideUp('slow');
});
});
Check it out here.
This fixed it for me Here
$(document).ready(function()
{
$('li.MainStage').hover( function()
{
$(this).stop();
$(this).find('ul.SubStage').slideDown('slow');
}, function()
{
$(this).stop();
$(this).find('ul.SubStage').slideUp('slow');
});
$('li.SubStage').hover( function()
{
$(this).stop();
$(this).find('ul.Sub2Stage').slideDown('slow');
}, function()
{
$(this).stop();
$(this).find('ul.Sub2Stage').slideUp('slow');
});
});