Jquery菜单，如何在后面制作动画从这个我自己制作的

Question

jQuery代码：

$(document).ready(function(){
    var abc='';
    $(".doa").on("click",function(){  
        var doa=$(this).val();
        var doah=$(this).position();
        abc=doah.top;
        var x=+doah.top-80;
        $(this).css({color:"red"});
        $(".doa").not(this).animate({opacity:"0",margin:"0 0 0 500"},400,function(){        
            $(this).css({display:"none"});
            $(".doa:contains('"+doa+"')").css({position:"absolute","top":doah.top}).animate({"top":50},function(){
                $(".doa:contains('"+doa+"')>.doaa").show(function(){
                    $(".doa").addClass("doa1").removeClass("doa");
                });
            });
            $(".naslov").css({position:"relative"}).animate({top:"300px",opacity:"0"},200);
        });
    });
)};

jsFiddle Demo

现在我想让同样的动画也反向工作。当在类doa1上单击时，我想要所有的原始动画，但向后。它应该首先隐藏doa1 > ul.doaa，然后隐藏类naslov和类doa回到原来的位置，在doa1类重置到它的原始位置之后，它应该反转doa类的div的动画(从上到下)...I已经尝试过了，我得到了this result

Answer 1

我解决了我正在寻找的problem...this的解决方案：solved

var abc='';
$(".load").delegate(".doa","click",function(){
    var doa=$(this).val();
    var doah=$(this).position();
    abc=doah.top;
    var x=+doah.top-80;
    $(this).css({color:"red"});
    $(".doa").not(this).animate({opacity:"0",margin:"0 0 0 500"},300,function(){        
        //$(this).css({display:"none"});
        $(".doa:contains('"+doa+"')").css({position:"absolute","top":doah.top}).animate({"top":50},function(){
            $(".doa:contains('"+doa+"')>.doaa").show(function(){
                $(".doa:contains('"+doa+"')").toggleClass("doa doa1");
            });
        });
        $(".naslov").css({position:"relative"}).animate({top:"300px",opacity:"0"},200);
    });
});

$(".load").delegate(".doa1","click",function(e){
    var po=$(this).val();
    $(".doa1>.doaa").hide(function(){
        $(".doa1:contains('"+po+"')").css({position:"absolute",color:"black"}).animate({"top":abc},function(){
            $(".doa1").css({position:"static"}).animate({opacity:"1",margin:"0"},300).toggleClass("doa1 doa");          
        });
        $(".naslov").css({position:"relative"}).animate({top:"0",opacity:"1"},200);
    }); 
});