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

您可以使用匿名回调函数以及动画调用，以便在点击的元素完成展开后显示您的菜单。这样你就可以获得准确的宽度。然后，您可以通过设置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秒延迟，并添加了'swing'缓动。这些是可选的，如果您愿意，可以使用原始的动画代码。

这是您更新的小提琴http://jsfiddle.net/CTms3/7/

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

希望此信息有所帮助。

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

1 个答案: