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/