0

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

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

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

这是一个小提琴

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

谢谢！

4

1 回答 1

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/

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

希望这些信息有所帮助。

于 2013-04-05T05:27:25.193 回答