CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tejas Rana
Tejas Rana

Reputation: 49

Jquery Slidein slideout hover effect issue

i want drop down menu with slidein and slideout effect. and it works but when i hover two three time then it continues slidein and out depends on how many time i hover.

    <div class="tp-menu">
<ul class="menu nav navbar-nav">
    <li class="" style=""><a  class="dropdown-toggle" href="index1.html">Demo 1 </a>
        <ul class="dropdown-menu" style="display: none;">
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
        </ul>
    </li>
    <li class="" style=""><a  class="dropdown-toggle" href="index1.html">Demo 2 </a>
        <ul class="dropdown-menu" style="display: none;">
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
        </ul>
    </li>
</ul></div>

and jquery 

 $("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
        $(this).children("ul.dropdown-menu").slideDown('fast');
        //alert(1);
    }, function () {
        $(this).children("ul.dropdown-menu").slideUp('slow');
    });

and you can see live demo here : http://jsfiddle.net/twb4spps/

i Need that if i hover two three time quickly but it show sub menu one time.

Upvotes: 1

Views: 238

Answers (5)

Jay
Jay

Reputation: 747

jsfiddle

Javascript:

    (function ($) { 
$("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
        $(this).children("ul.dropdown-menu").slideDown('fast');
        //alert(1);
    }, function () {
        $(this).children("ul.dropdown-menu").stop(true).slideUp('slow');
    });
}(jQuery));

CSS: .li_item { display: block; max-width:60px; }

.li_item>ul {
  margin: 0;
   padding: 0;
  display: block;
  width:200px;
}

Upvotes: 0

Slavenko Miljic
Slavenko Miljic

Reputation: 3856

You need to stop the animation and clear the animation queue. You do that by applying .stop(true) on hoverOut. 

.stop() //stops the nimation
.stop(true) //stops the animation and clears the queue

CODE:

(function ($) { 
$("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
        $(this).children("ul.dropdown-menu").slideDown('fast');
        //alert(1);
    }, function () {
        $(this).children("ul.dropdown-menu").stop(true).slideUp('slow');
    });
}(jQuery));

JSFIDDLE

Upvotes: 3

Hari Om Srivastava
Hari Om Srivastava

Reputation: 346

Your code are so good ,No issue in your code ,Please try this CSS 

ul.menu.nav.navbar-nav {
    float: left;
}

and check it again ,It work for me,See full code 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
</head>

<body>
<div class="tp-menu">
<ul class="menu nav navbar-nav">
    <li class="" style=""><a  class="dropdown-toggle" href="index1.html">Demo 1 </a>
        <ul class="dropdown-menu" style="display: none;">
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
        </ul>
    </li>
    <li class="" style=""><a  class="dropdown-toggle" href="index1.html">Demo 2 </a>
        <ul class="dropdown-menu" style="display: none;">
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
        </ul>
    </li>
</ul>
</div>
</body>
<script>
(function ($) { 
$("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
        $(this).children("ul.dropdown-menu").slideDown('fast');
        //alert(1);
    }, function () {
        $(this).children("ul.dropdown-menu").slideUp('slow');
    });
}(jQuery));

</script>
</html>

Upvotes: 0

Rob Foley
Rob Foley

Reputation: 581

Depending on how you'd like it to look, this may be an alternative to Slavenko's answer:

(function ($) { 
$("div.tp-menu ul.menu li").hover(function () { 
        $(this).children("ul.dropdown-menu").filter(':not(:visible)').slideDown('fast');
    }, function () {
            $(this).children("ul.dropdown-menu").filter(':visible').slideUp('slow');
    });
}(jQuery));

This just uses some of jquery's filters with the css :not selector to only apply the animation to elements that are visible.

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Using filter you can achieve this. Try to target like this .filter(":not(:animated)"), So that it will stop other unnecessary animations.

  (function ($) { 
   $("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
    $(this).children("ul.dropdown-menu").filter(":not(:animated)").slideDown('fast');
    //alert(1);
}, function () {
    $(this).children("ul.dropdown-menu").filter(":not(:animated)").slideUp('slow');
});
}(jQuery));

DEMO

Upvotes: 0

Related Questions