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

Jquery Animate Divs，Animate One An Animate Out of Rest Out

1 个答案: