CODEWITHSUNDEEP
jqueryhoverjquery-animate
Charles Marsh
Charles Marsh

Reputation: 421

Jquery - Animate div on hover

I'm applying a simple animation to a div when hovering an id. The div is not a child of the id. So when my cursor leaves the id the div hides itself. This is correct, but I require the div to stay visible unless my mouse leaves it.

You may have to test to see my issue. Link is below.

Heres my jQuery:

            $(function(){
                $('.has-children').hover(function(){
                    var the_handle = $(this).attr('id');
                    var the_sub_nav = '#' + the_handle + '-sub-nav';
                    $(the_sub_nav).stop().animate({height:'200px'},1000);
                },function(){
                    var the_handle = $(this).attr('id');
                    var the_sub_nav = '#' + the_handle + '-sub-nav';
                    $(the_sub_nav).stop().animate({height:'0px'},1000);
                });

           });

Here is a link to the issue:

http://tinyurl.com/c9yunhu

(I should mention I'm resticted to that HTML code. I'm using an e-commerce platform and thats the only way I can create sub-categories)

Upvotes: 0

Views: 1524

Answers (4)

Andrea Turri
Andrea Turri

Reputation: 6500

Here a simple JSFiddle for you http://jsfiddle.net/toroncino/uPDXX/1/

Edit: Here a short version: http://jsfiddle.net/toroncino/uPDXX/3/

EDIT 2:

Take a look now, is based on your current html... obviously I will never use a js like that. =) but maybe it will help you...

http://jsfiddle.net/toroncino/uPDXX/5/

Upvotes: 1

user1289347
user1289347

Reputation: 2407

Add the submenu container to the hover function, that way it will stay open while hovering over the menu item or the entire submenu.

$('.has-children, #submenu-ID').hover(function(){

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

    $('.has-children').on('hover', function(){
        var the_sub_nav = '#' + this.id + '-sub-nav';
        $(the_sub_nav).stop().animate({height:'200px'},1000);
    });

Upvotes: 0

elaxsj
elaxsj

Reputation: 474

If I understand you correctly; Just remove the second function of hover() to make the div stay visible on mouseout. Complete code:

$(function(){
    $('.has-children').hover(function(){
        var the_handle = $(this).attr('id');
        var the_sub_nav = '#' + the_handle + '-sub-nav';
        $(the_sub_nav).stop().animate({height:'200px'},1000);
    });
});

Upvotes: 2

Related Questions