Using jQuery .animate on hover to display new div

Question

The function is working correctly, however the div to the right disappears before I can click on any link. Should I incorporate a mouse event to get this to work almost like a sideways drop down menu?

$(".design").hover(function () {
$(".design-nav").animate({opacity: "1"}, {queue: false});
}, function () {
$(".design-nav").animate({opacity: "0"}, {queue: false});
});

<div class="design"></div>
<div class="design-nav">
<div><li href="#">link</li></div>
<div><li href="#">link</li></div>
<div><li href="#">link</li></div>
</div>

Or see working demo here - http://jsfiddle.net/conordaltonlive/jfLNh/3/

Answer 1

Try this:

$(".design,.design-nav").hover(function () {
    $(".design-nav").animate({
        opacity: "1"
    }, {
        queue: false
    });
}, function () {
    $(".design-nav").animate({
        opacity: "0"
    }, {
        queue: false
    });
});

And also change your .design-nav css opacity:0

Fiddle Here

Answer 2

Working DEMO

Try this

Wrap your div together inside another here it is <div id="container"> and apply hover on it, so it works, otherwise if you move away from your hover div , the visible div will hide.

html

<div id="container">    // added div
<div class="design"></div>
<div class="design-nav">
    <div><li href="#">link</li></div>
    <div><li href="#">link</li></div>
    <div><li href="#">link</li></div>
</div>
</div>

code

$("#container").hover(function () { // changed selector '.design' to '#container'
    $(".design-nav").animate({
        opacity: "1"
    }, {
        queue: false
    });
}, function () {
    $(".design-nav").animate({
        opacity: "0"
    }, {
        queue: false
    });
});

and changed opacity: 0; of class .design-nav inorder to hide it on page load

Hope this helps,thank you