Jquery Animate Divs，Animate One In Animate The Rest Out

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