CODEWITHSUNDEEP
javascriptjquery
OGZCoder
OGZCoder

Reputation: 285

How do I keep a div with slideDown() with a mouseLeave() trigger for the slideUp() from firing if I mouseLeave() to another specific div?

What I am trying to do is create a dropdown that slides down when a link is clicked and depending on which link is clicked a specific hidden div is shown. I want it to switch between the hidden divs gracefully in the exposed dropdown when another link is clicked. We've pretty much got the first part of that figured out. What I'm tryiing to figure out is how to make the dropdown slide back up after a delay when the mouse leaves the dropdown and the menu,so it stays open if your still mouseon the menu or the dropdown, not just the dropdown or the menu. What I've got below almost works. The only thing missing how to keep the dropdown open when moving back to the menu. Any suggestions?

So I want it to function as follow:

Click link - $("div").slideDown();

Exit $("div") - $("div").slideUp();

Exit $("div") into $("div-2") don't $("div").slideUp();

Exit $("div-2") back into $("div") don't $("div").slideUp();

Exit $("div-2") - $("div").slideUp();

Heres the javascript with jQuery I've got so far:

$('.dropdown-link > a').click(function() {
  var link = this;
  if ($(".navigation-dropdown").is(':hidden')) {
    $(".navigation-dropdown").slideDown(1000, 'swing', function() {
      switcher(link, $('#' + $(link).attr('data-panel-id')));
    });
  } else {
    switcher(this, $('#' + $(this).attr('data-panel-id')))
 };
  $(".navigation-dropdown").mouseleave(function(event) {
    $(".navigation-dropdown").slideUp(1000, 'swing');
    $(".active-item").removeClass('active-item');
  });
});

function switcher(link, panel) {
  $(".panel").stop().hide();
  $(".active-item").removeClass('active-item');
  $(panel).fadeIn(200);
  $(link).parent().addClass('active-item');
};

Heres the fiddle: https://jsfiddle.net/OGZStudios/qdp42cph/9/

Here's the result of what I've got so far for better concept: http://woodlandbible.tk

Upvotes: 1

Views: 78

Answers (1)

Jacob Brazeal
Jacob Brazeal

Reputation: 654

What about this:

function switcher(link,panel){
    $(".panel").fadeOut(function() {
        $(".active-item").removeClass('active-item');
        $(panel).fadeIn(200);
        $(link).parent().addClass('active-item');
    });

};

This should fade out any open panels, and when they are gone, fade in the new panel and modify your links. The problem is manually checking for visibility when jQuery is in the process of fading stuff in and out. It can do it all for you!

Regarding shorter code: You need a way to tie each link to each panel. Right now those connections are hard coded in the script, but suppose you gave the link a data-panel-id attribute with the id of the corresponding panel, all your .click handlers reduce to:

$('.panel').click(function(){
     switcher(this,$('#' + $(this).attr('data-panel-id')))
});

EDIT: Use $(".panel").stop() to end all ongoing animations. The following worked for me in JSFiddle:

function switcher(link,panel){
    $(".panel").stop().hide();
     $(".active-item").removeClass('active-item');
     $(panel).fadeIn(200);
     $(link).parent().addClass('active-item');

};

Upvotes: 1

Related Questions