javascript - 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 的动画，(全部从上到下)...我已经尝试过，我得到 this result

Answer 1

我解决了我的问题...这是我正在寻找的解决方案: 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);
    }); 
});