CODEWITHSUNDEEP
javascriptjquery
L. Dave
L. Dave

Reputation: 35

Why jQuery hide() not work but fadeOut() works?

jsfiddle

Why hide() not working? When I try change hide() to fadeOut() then it's working. Why?

$(document).ready(function() {
  $(".toggle").hover(function() {
    $(".submenu").hide();
    $(this).find(".submenu").first().show();

    $(".hlavnaKategoria").removeClass("active");
    $(this).addClass("active");
  });

  $(".submenu").mouseleave(function() {
    $(".submenu").hide(); // whi this not work?? Try change it to fadeOut()
  });
});
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700&subset=latin,latin-ext);
 html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 11pt;
}
html {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
}
.inline {
  display: inline-block;
  vertical-align: top;
  margin: 0 auto;
}
.hidden {
  display: none;
}
.bold,
.strong {
  font-weight: bold;
}
.padding20 {
  padding: 20px;
}
.padding10 {
  padding: 10px;
}
.header {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  background: #1B6CBF;
  height: 100px;
}
.big {
  font-size: 18pt;
}
.menu {
  position: absolute;
  top: 100px;
  width: 200px;
  left: 0px;
  border-right: 1px solid #323232;
  text-align: right;
}
.menu ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: inherit;
}
.menu ul li.hlavnaKategoria {
  cursor: pointer;
  padding: 10px 20px 10px 10px;
}
.menu ul li.hlavnaKategoria .submenu {
  position: absolute;
  top: 0px;
  left: 201px;
  width: 800px;
  background: #323232;
  display: none;
  text-align: left;
  height: 100%;
  z-index: 100;
}
.submenu-item-box {
  width: 300px;
  text-align: left;
  margin: 10px 5px 5px 10px;
  border-left: 5px solid silver;
}
.submenu-item-box:hover {
  border-left: 5px solid #1B6CBF;
}
.submenu-item-box a {
  text-decoration: underline;
  color: #fff;
}
li.hlavnaKategoria.active {
  background-color: #323232;
  border-right: 0px;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="kategorie">
    <li class="hlavnaKategoria toggle" data-submenu="14">
      <a class="">Menu 1</a>
      <div class="submenu" id="sm_14">
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 1</div>
        </div>
      </div>
    </li>
    <li class="hlavnaKategoria toggle" data-submenu="35">
      <a class="">Menu 2</a>
      <div class="submenu" id="sm_35">
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 1</div>
        </div>
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 2</div>
        </div>
      </div>
    </li>
  </ul>
</div>

Upvotes: 3

Views: 392

Answers (2)

Grundy
Grundy

Reputation: 13381

Seems you a use hover function a bit wrong.
First, if you output log to see when call your functions, you can see that your mouse leave not calling, because to fire it you should be over element with class submenu. So, this element inside toggle and when you leave it you also leave element with toggle class, that raise hover function again.

In case fadeOut animation was delay, and really you hide element after calling show function. In case hide you hide element, and show it instant.

To solve you should use hover with handlerIn, handlerOut params and show in handerIn and hide in handlerOur.

Sample: 

$(document).ready(function() {
  $(".toggle").hover(function() {
    console.log('hover in');
    $(this).find(".submenu").first().show();
    $(this).addClass("active");
  },function(){
    console.log('hover out');
    $(".hlavnaKategoria").removeClass("active");
    $(".submenu").hide();
  });
});
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700&subset=latin,latin-ext);
 html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 11pt;
}
html {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
}
.inline {
  display: inline-block;
  vertical-align: top;
  margin: 0 auto;
}
.hidden {
  display: none;
}
.bold,
.strong {
  font-weight: bold;
}
.padding20 {
  padding: 20px;
}
.padding10 {
  padding: 10px;
}
.header {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  background: #1B6CBF;
  height: 100px;
}
.big {
  font-size: 18pt;
}
.menu {
  position: absolute;
  top: 100px;
  width: 200px;
  left: 0px;
  border-right: 1px solid #323232;
  text-align: right;
}
.menu ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: inherit;
}
.menu ul li.hlavnaKategoria {
  cursor: pointer;
  padding: 10px 20px 10px 10px;
}
.menu ul li.hlavnaKategoria .submenu {
  position: absolute;
  top: 0px;
  left: 201px;
  width: 800px;
  background: #323232;
  display: none;
  text-align: left;
  height: 100%;
  z-index: 100;
}
.submenu-item-box {
  width: 300px;
  text-align: left;
  margin: 10px 5px 5px 10px;
  border-left: 5px solid silver;
}
.submenu-item-box:hover {
  border-left: 5px solid #1B6CBF;
}
.submenu-item-box a {
  text-decoration: underline;
  color: #fff;
}
li.hlavnaKategoria.active {
  background-color: #323232;
  border-right: 0px;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="kategorie">
    <li class="hlavnaKategoria toggle" data-submenu="14">
      <a class="">Menu 1</a>
      <div class="submenu" id="sm_14">
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 1</div>
        </div>
      </div>
    </li>
    <li class="hlavnaKategoria toggle" data-submenu="35">
      <a class="">Menu 2</a>
      <div class="submenu" id="sm_35">
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 1</div>
        </div>
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 2</div>
        </div>
      </div>
    </li>
  </ul>
</div>

Upvotes: 1

Trygve Skogsholm
Trygve Skogsholm

Reputation: 129

Looks to me like show() is being called after hide() because for some reason a hover event on the root menu is triggered after mouseleave. Look at the output from this:

$(document).ready(function(){
    $(".toggle").hover(function(){
        $(".submenu").hide();
    $('body').append('hovering, calling show() <br/>');
        $(this).find(".submenu").first().show();

        $(".hlavnaKategoria").removeClass("active");
        $(this).addClass("active");
    }); 

    $(".submenu").mouseleave(function(){
    $('body').append('mouse left, calling hide() <br/>');
        $(".submenu").hide(); // whi this not work?? Try change it to fadeOut()
    });
});

I checked with fadeout and the same thing happens, I think it looks like it 'works' because show() refuses to interrupt the animation. After the animation is done new hover events will revert the transparency but not while it is an intermediate value like 50%.

Solution? the hover event has both an in and an out handler. http://api.jquery.com/hover/ Hopefully the timing is correct on those. i.e. your out handler can hide the submenu and that will be the end of it.

Upvotes: 0

Related Questions