jquery在動畫後設置div寬度爲其他div的寬度

Question

我將動畫div設置得更寬，動畫後我想將下列列表的寬度設置爲與新動畫div完全相同，並移動這是在它之下。

奇怪的是，當調整大小時，它只調整到一個很小的寬度，一旦再次點擊它將是一個毫秒所需的大小。 這可能並不清楚。

$('#LoginButton').click(function(){ 
    $('.username').stop(true,false).animate({width:'toggle'}); 
    $("#profilesettings").delay(220).toggle(300); 
    $("#profilesettings").width($("#LoginButton").outerWidth(true)); 
}); 

這裏有一個Fiddle

所以，我想這似乎是整個圖像+名欄的寬度名單，我想將它移到恰好在它之下。

謝謝！

Answer 1

您可以使用匿名回調函數以及animate調用，以便在clicked元素完成展開後出現菜單。這樣你會得到準確的寬度。然後您可以通過設置clear:both;使其顯示在下方。

生成的代碼看起來像......

$('#LoginButton').click(function(){ 
    //$('.username').stop(true,false).animate({width:'toggle'}); 
    $('.username').animate({ 
      width : 'toggle' 
    }, 1000, 'swing',function(){ 
     var newWidth = ($('.username').width()); 
     $("#profilesettings").width(newWidth).css({ 
      clear:'both', 
      'margin-top':0 
     });   
     $("#profilesettings").toggle(300); 
    });//end anonymous funciton    
});//end click funciton 

我指定了1秒的延遲，並增加了「搖擺」漸變效果。這些是可選的，如果您願意，您可以使用原始的動畫代碼。

這裏是你更新的提琴http://jsfiddle.net/CTms3/7/

另一種方法是動畫父容器，所以，無論是按鈕，列表，同時擴大..

希望這個信息幫助。