jquery在动画后将div宽度设置为其他div的宽度答案

【问题标题】：jquery set div width to other div's width after animationjquery在动画后将div宽度设置为其他div的宽度
【发布时间】：2013-03-27 10:09:52
【问题描述】：

我正在为一个更宽的 div 设置动画，在动画之后我想将以下列表的宽度设置为与新动画 div 的宽度完全相同，并将其移动到它的下方。

奇怪的是，在调整大小时，它只会调整到一个小宽度，一旦再次点击它就会在一毫秒内保持所需的大小。这可能不清楚。

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

这是Fiddle

所以，我希望列表看起来是整个图像 + 名称栏的宽度，我想将它完全移动到它下面。

谢谢！

【问题讨论】：

标签： jquery jquery-animate width toggle outerwidth

【解决方案1】：

您可以将匿名回调函数与 animate 调用一起使用，以便在单击的元素完成展开后显示您的菜单。这样，您将获得准确的宽度。然后，您可以通过设置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/

另一种方法是为父容器设置动画，以便按钮和列表同时展开..

希望这些信息对您有所帮助。

【讨论】：

很高兴能提供帮助；）