CODEWITHSUNDEEP
javascriptjquerycss
user3541306
user3541306

Reputation: 13

Stop second event

I'm building a multi-level menu, where the submenu is being displayed with jquery. It drops down when a main link is hovered, then slides up when the mouse leaves. I want to stop the mouseleave action, when mouseover is active, but i can't stop the second event (animate->margin-bottom). I'm new to jquery, so i went through many questions and googled a lot, but i don't really understand what i'm supposed to do here. Any help will be greatly appreciated!

jQuery(".item-102 a").on('mouseenter', function() {
  jQuery("#horizontal-menu").animate({"margin-bottom": "0px"}, 300);
  jQuery("#submenu").slideDown("slow");
});
jQuery("#submenu").on('mouseleave',function() {
  jQuery("#submenu").delay(2000).slideUp("slow");
  jQuery("#horizontal-menu").delay(2000).animate({"margin-bottom": "+20px"}, 200);
});

jQuery("#submenu").on('mouseover', function() {
  jQuery(this).stop();
});

Upvotes: 0

Views: 57

Answers (2)

user3541306
user3541306

Reputation: 13

I've managed to do it, thanks everyone. Hsz's answer was good, but it didn't fully stop the event, so here's the solution:

function(){
jQuery(".item-102 a").on('mouseenter', function() {
    jQuery("#horizontal-menu").animate({"margin-bottom": "0px"}, 300);
        jQuery("#submenu").slideDown("slow");
});

var hover_off = false;
jQuery("#submenu").mouseover(function (){
    hover_off = false;
});
jQuery("#submenu").mouseleave(function() {
    hover_off = true;
    setTimeout(myMouseOut, 1000);
});
function myMouseOut(){
    if (hover_off == true){
        jQuery("#submenu").delay(1000).slideUp("slow");
        jQuery("#horizontal-menu").delay(1000).animate({"margin-bottom": "+20px"}, 200);
    }
};

Upvotes: 1

hsz
hsz

Reputation: 152216

Just try with:

jQuery("#submenu").on('mouseover', function()
{
  jQuery(this).stop();
  jQuery("#horizontal-menu").stop();
});

Upvotes: 3

Related Questions