Question

I am trying to debug the following script to ensure the best, desired UX. This script is not working quite as desired, as seen on this fiddle.

    $("ul.menu li").mouseover(function() {
        $(this).find("ul.sub-menu").animate({"opacity": "show"}, 800, "swing");

        $(this).hover(function() {}, function(){
            $(this).find("ul.sub-menu").animate({"opacity": "hide"}, "slow");
        });
    });

As you can see the animations don’t trigger initially. Also if the user accidentally hovers over multiple links then undesired animations get stuck playing for many seconds onward. I want to edit this responsiveness. What are currently some of the top ways to deal with this in professional UI design when working with jQuery and how can I implement these solutions into my script?

Answer 1

You are nesting mouseover() and .hover() which was the main issue. You just simply want to show something when you hover over it, and then reverse the animation when you hover out.

Try this: http://jsfiddle.net/pF8wZ/4/

jQuery(document).ready(function($) {
    $("ul.menu > li").hover(
        function() {
            $(this).find("ul.sub-menu").stop().animate({
                height: 'toggle',
                opacity: 'toggle'
            });
        }
    );
});

I also cleaned up your CSS from the fiddle. You just need this to make the hovering behavior work:

#access {
background: #000;
margin: 0 auto;
display: block;
float: left;
    position: relative;
}
ul.menu { 
    list-style: none;
    margin: 0;
}
ul.menu > li {
    float: left;
    padding: 5px;
    background: #ccc;
}
#access ul .sub-menu {
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    width: 200px;
    background-color: #474747;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    display: none;
}
#access ul .sub-menu a {
    background: #333;
    line-height: 1em;
    display: block;
    padding: 3px 5px;
    background-image: -moz-linear-gradient(100% 100% 90deg, #474747, #939393);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#939393), to(#474747));
}

And the HTML:

<div id="access">
<div class="menu-header">

<ul id="menu-wordpress-sandbox-menu" class="menu">
    <li id="menu-item-17" class="menu-item">
        <a href="#">Fruits</a>
        <ul class="sub-menu">
            <li id="menu-item-19" class="menu-item"><a href="#">Oranges</a></li>
            <li id="menu-item-20" class="menu-item"><a href="#">Apples</a></li>
        </ul>
    </li>
    <li id="menu-item-32" class="menu-item">
        <a href="#">Colors</a>
        <ul class="sub-menu">
            <li id="menu-item-30" class="menu-item"><a href="#">Blue</a></li>
            <li id="menu-item-31" class="menu-item"><a href="#">Red</a></li>
        </ul>
    </li>
    <li id="menu-item-33" class="menu-item">
        <a href="#">Links</a>
        <ul class="sub-menu">
            <li id="menu-item-34" class="menu-item"><a href="#">Google</a></li>
            <li id="menu-item-35" class="menu-item"><a href="#">Yahoo!</a></li>
        </ul>
    </li>
</ul>

</div>
</div>