Question

I started by trying to add a .toggle() to this code so that the menu will animate on click but also close on a click, then realized that I can’t use the .animate within a .toggle() very well so i’m trying out .click()

If there is a way to replace my mouseenter and mouseleave functions with a click that is what I am looking for.

I’ve searched but I can’t find anywhere this has been done with an animated menu so, here is the javascript for the function:

$('#sdt_menu > li').bind('mouseenter',function(){
    var $elem = $(this);
    $elem.find('img')
         .stop(true)
         .animate({
            border: '5px solid #000',

            'width':'150px',
            'height':'170px',
            'left':'0px'
         },400,'easeOutBack')
         .andSelf()
         .find('.sdt_wrap')
         .stop(true)
         .animate({'top':'140px'},500,'easeOutBack')
         .andSelf()
         .find('.sdt_active')
         .stop(true)
         .animate({'height':'170px'},300,function(){
        var $sub_menu = $elem.find('.sdt_box');
        if($sub_menu.length){
            var left = '170px';
            if($elem.parent().children().length == $elem.index()+1)
                left = '-170px';
            $sub_menu.show().animate({'left':left},200);
        }    
    });
}).bind('mouseleave',function(){
    var $elem = $(this);
    var $sub_menu = $elem.find('.sdt_box');
    if($sub_menu.length)
        $sub_menu.hide().css('left','0px');

    $elem.find('.sdt_active')
         .stop(true)
         .animate({'height':'0px'},300)

         .andSelf().find('img')
         .stop(true)
         .animate({
            border: "2px solid #FFFFFF",
            'width':'150px',
            'height':'150px',
            'left':'0px'},400)
         .andSelf()
         .find('.sdt_wrap')
         .stop(true)
         .animate({'top':'25px'},500);
});

Answer 1

Below I add a class if it opens, and remove a class if it closes which tells the onclick event what to do.

Check out http://api.jquery.com/toggle-event/. Simple enough.

Credit to apsillers.

$('#sdt_menu > li').toggle(function(){
    var $elem = $(this);
    var $sub_menu = $elem.find('.sdt_box');
    $elem.find('img')
         .stop(true)
         .animate({
            border: '5px solid #000',

            'width':'150px',
            'height':'170px',
            'left':'0px'
         },400,'easeOutBack')
         .andSelf()
         .find('.sdt_wrap')
         .stop(true)
         .animate({'top':'140px'},500,'easeOutBack')
         .andSelf()
         .find('.sdt_active')
         .stop(true)
         .animate({'height':'170px'},300,function(){
        if($sub_menu.length){
            var left = '170px';
            if($elem.parent().children().length == $elem.index()+1)
                left = '-170px';
            $sub_menu.show().animate({'left':left},200);
        }    
    });
}, function(){      
    var $elem = $(this);
    var $sub_menu = $elem.find('.sdt_box');
    if($sub_menu.length)
        $sub_menu.hide().css('left','0px');     
    $elem.find('.sdt_active')
         .stop(true)
         .animate({'height':'0px'},300)     
         .andSelf().find('img')
         .stop(true)
         .animate({
            border: "2px solid #FFFFFF",
            'width':'150px',
            'height':'150px',
            'left':'0px'},400)
         .andSelf()
         .find('.sdt_wrap')
         .stop(true)
         .animate({'top':'25px'},500);
});