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) );
});

Вот скрипка

Итак, я хотел бы, чтобы список, который выглядит как ширина всего изображения + строка имени, и я хотел бы переместить его точно под ним.

Спасибо!

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 секунду, а также добавил замедление "свинг". Они не являются обязательными, и вы можете использовать свой исходный код анимации, если хотите.

вот ваша обновленная скрипка http://jsfiddle.net/CTms3/7/

Альтернативный подход состоит в том, чтобы анимировать родительский контейнер, чтобы и кнопка, и список расширялись одновременно.

Надеюсь, эта информация поможет.