Question

难以让我的javascript以我想要的方式行事。我有一个按钮，点击动画“面板”可以垂直展开，“包装”可以水平展开。

$(document).ready(function(){
$(".btn-slide").click(function(){
        $("#panel").animate({
            opacity: 0.100,
            height: 'toggle',       
            }, 
            1000, function() {
        });         
        $("#wrapper").animate({
            width: 900,         
            }, 
            1000, function() {
            // Animation complete.
        });
});  
});

第二次单击按钮时出现问题。按钮再次关闭，但仅垂直关闭。水平宽度（由#wrapper控制）在第二次单击时不会从其单击状态（900px）恢复到其初始状态（300px）。当再次单击该按钮时，如何让#wrapper从900px返回到300px？

感谢您的任何建议。

Answer 1

这样的东西？

 var open = true;
    $(".btn-slide").click(function(){
        if(open){
            $("#panel").animate({
                opacity: 0.100,
                height: 'toggle',       
                }, 
                1000, function() {
            });         
            $("#wrapper").animate({
                width: 900,         
                }, 
                1000, function() {
                // Animation complete.
            });
        open= false;
        }
        else{

            $("#panel").animate({
                opacity: 0.100,
                height: 'toggle',       
                }, 
                1000, function() {
            });         
            $("#wrapper").animate({
                width: 300,         
                }, 
                1000, function() {
                // Animation complete.
            });
            open = true;
        }
    });

第二次单击时动画（）

1 个答案: