animate () при втором нажатии

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;
        }
    });