CODEWITHSUNDEEP
javascripthtmljqueryjquery-events
Jacques Marais
Jacques Marais

Reputation: 2756

How can I use slideToggle() with a duration and easing?

I am making a sliding menu using jQuery and the bounce jQuery UI effect. The problem is that the hover event doesn't activate even once when I hover over the first li element. Here is my JavaScript code:

$(document).ready(function(){
    $("#topbar > ul > li:has(ul) > ul").hide().each(function(){
        var parent = $(this).parent();
        var height = parent.outerHeight();
        $(this).css({
            position: "absolute",
            top: height,
            zIndex: 1000
        });
    });
    $("#topbar > ul > li:has(ul)").hover(function(){
        $("ul", this).slideDown(500, "easeOutBounce");
    }, function(){
        $("ul", this).slideUp(500, "easeOutBounce");
    });
});

And here is my HTML code:

<nav id="topbar">
    <ul>
        <li><a href=""><i class="fa fa-plus"></i>  New</a><ul><li>T</li><li>R</li></ul></li
        ><li><a href="">View</a></li>
    </ul>
</nav>

I am always using the latest version of jQuery provided from jQuery's CDN (http://code.jquery.com/jquery.min.js) and I am using version 1.11.4 of jQuery UI.

Edit: Instead of the .hover method, I also tried the following:

$("#topbar > ul > li:has(ul)").on("mouseover mouseout", function(){
    $("ul", this).slideToggle(500, "easeOutBounce");
});

Edit: JSFiddle Here (Old JSFiddle was wrong.)

Upvotes: 3

Views: 1779

Answers (1)

Wesley Smith
Wesley Smith

Reputation: 19571

Your only real issue seems to be that the background for the UL your are trying to display is transparent.

Add a class like the below to your element:

<ul class="drop"><li>T</li><li>R</li></ul>

Then add the below CSS rule:

.drop{
    background-color:#ccc;
}

As A.Wolf points out changing your code to the below would be better for performance and makes the whole effect a good bit soother.

$(this).find("ul").stop().slideToggle(500, "easeOutBounce");

Try this jsFiddle you will see that the ul is displayed and hidden on hover, and that the animation is now cleaner.

Upvotes: 1

Related Questions