javascript - Why jQuery hide() not work but fadeOut() works? -
why hide() not working? when try change hide() fadeout() 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 not work?? try change 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 { 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>
seems use hover function bit wrong.
first, if output log see when call functions, can see mouse leave not calling, because fire should on element class submenu. so, element inside toggle , when leave leave element toggle class, raise hover function again.
in case fadeout animation delay, , hide element after calling show function. in case hide hide element, , show instant.
to solve should use hover handlerin, handlerout params , show in handerin , 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 { 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>
Comments
Post a Comment