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

Question

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.)

I suggest you don't use hover, but mouseenter mouseleave. Hover is not a valid event anymore in jQuery. Here more: https://jquery.com/upgrade-guide/1.9/#quot-hover-quot-pseudo-event — Michelangelo, Nov 22 '15 at 13:09
@Mikey [`.hover()`](https://api.jquery.com/hover/) is still a valid function [`.on('hover',.....)`](http://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover) is no longer valid, that's probably what you're thinking of — Wesley Smith, Nov 22 '15 at 13:12
@Mikey As you can see in the update, I also tried the `mouseover` and `mouseout` methods. — Jacques Marais, Nov 22 '15 at 13:14
For me, the elements seem to display on hover but are really faint: http://prntscr.com/95lgcc — Wesley Smith, Nov 22 '15 at 13:17
@JacquesMarais The console is giving an error: Uncaught TypeError: jQuery.easing[this.easing] is not a function, maybe you should look into that — Michelangelo, Nov 22 '15 at 13:19
@Mikey Sorry, it was due to jQuery UI not being included, it is now. — Jacques Marais, Nov 22 '15 at 13:21

Wesley Smith · Accepted Answer · 2015-11-22T14:49:26.080

1

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.

edited Nov 22 '15 at 14:49

answered Nov 22 '15 at 13:35

Wesley Smith

19,401
22
85
133

@JacquesMarais You're quite welcome, you probably should tweak the height / width of the hovered element to 100% of the container size too. I noticed it's a bit finicky now due to that area being so small, happy coding – Wesley Smith Nov 22 '15 at 13:37
1

@DelightedD0D You don't need to pass any empty callback, this is perfectly valid: `.slideToggle(500, "easeOutBounce");` – A. Wolff Nov 22 '15 at 13:58
@A.Wolff Thanks, looking at [the source for .speed](http://james.padolsey.com/jquery/#v=1.11.2&fn=jQuery.speed) I see you are correct. That's not at all how I read the meaning of the docs that's my bad, Ill update – Wesley Smith Nov 22 '15 at 14:37
1

As a side note, it should be: `$(this).find("ul").stop().slideToggle(500, "easeOutBounce");` More readable, more performant (if we care about few ms) and better behaviour :) – A. Wolff Nov 22 '15 at 14:39
@JacquesMarais Please see AWolfs comments and my update, I was wrong before :) – Wesley Smith Nov 22 '15 at 14:53
@DelightedD0D Thanks :) – Jacques Marais Nov 22 '15 at 15:27

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

1 Answers1