jQuery更改切换顺序关闭

Question

我正在寻找重新定义我的切换功能。现在它切换正常，但是，第一个切换“打开”两个不同的部分 - 这很好。关闭它们时，我想同时关闭它们，或者至少要先关闭它们。此外，我还想关闭这两个，如果有的话，但列表被点击。

$('#LoginButton').click(function(){ 
$('.username').animate({ 
     width : 'toggle' 
}, 1000, 'swing',function(){ //Set new LoginButton width 
    var newWidth = ($('.username').width()); //get new width 
    $('#LoginButton').toggleClass('expanded'); //just for rounded corners 
    $("#profilesettings").width(newWidth).toggle(300); //new list width animation 
}); 
}); 

我在看什么：Fiddle

任何帮助是极大的赞赏。谢谢。

Answer 1

您正在使用animate方法的回调函数，当.username元素可见时应该调用hide方法，因此动画在相同的位置执行。

$('#LoginButton').click(function() { 
    var $username = $('.username'), 
     $profile = $('#profilesettings'), 
     state = true; 

    if ($username.is(':visible')) { 
     $profile.hide(1000); 
     state = false; 
    } 
    $username.animate({ 
     width: 'toggle' 
    }, 1000, 'swing', function() { 
     if (state) { 
      var newWidth = $(this).width(); 
      $profile.width(newWidth).show(300); 
     } 
     $('#LoginButton').toggleClass('expanded'); 
    }); 
}); 

http://jsfiddle.net/wxXyM/