Jquery动画潜水，动画一个在动画休息

Question

我尽量不在StackExchange上发布太多问题，除非我似乎找不到解决方案。我仍在学习jQuery，并且在设置左侧菜单滑动面板的动画时遇到了问题。

滑动面板的目的是为用户提供从数据库中提取的信息和链接。我正试图弄清楚如何在中设置一个面板的动画，并设置动画（如果当前已经打开了一个）以设置动画。因此，任何时候都只能打开一个面板。

到目前为止，这是我的代码：

$(".editor_content").hide();
//Panel 1
$('#tab_editor').toggle(function(){
    $('#panel_editor').animate({width:"400px", opacity:1.0}, 500, function() {
        $('.editor_content').fadeIn('slow');
        $('.wrapper').animate({"left": "190px"}, "slow");
    });  
},function(){ 
    $('.editor_content').fadeOut('fast', function() { 
        $('#panel_editor').stop().animate({width:"0", opacity:0.0}, 200);
        $('.wrapper').animate({"left": "0px"}, "slow");
    });
});
//Panel 2
$('#tab_themer').toggle(function(){
    $('#panel_themer').animate({width:"400px", opacity:1.0}, 500, function() {
        $('.themer_content').fadeIn('slow');
        $('.wrapper').animate({"left": "190px"}, "slow");
    });  
},function(){ 
    $('.themer_content').fadeOut('fast', function() { 
        $('#panel_themer').stop().animate({width:"0", opacity:0.0}, 200);
        $('.wrapper').animate({"left": "0px"}, "slow");
    });
});

两个面板的CSS都设置为fixed top:0 left:0。

使用上面的代码，面板将动画化，但当一个面板被点击并动画化时，我无法理解如何动画化当前打开的面板。

如有任何帮助或指导，我们将不胜感激。

提前谢谢。

Answer 1

您应该使用javascript"this"变量。这将允许您编写一个函数，打开单击的元素并关闭其他元素。

这是我为有类似问题的人做的一把小提琴，他们想打开一个菜单面板，同时关闭任何其他打开的面板。

Fiddle