jQuery: div возвращается к полному размеру после анимации - PullRequest
Новая
       28

jQuery: div возвращается к полному размеру после анимации

2 голосов
/ 28 мая 2009

В приведенном ниже примере с jQuery у меня есть один div внутри другого. Когда я оживляю внутренний div до ширины 0, внешний div (имеющий абсолютное позиционирование) вместе с ним уменьшается в ширину.

Это желательно.

Проблема в том, что после завершения анимации внешний div возвращается к своему первоначальному размеру. Это ожидается? Как я могу предотвратить это?

Спасибо!

Пример

HTML: 

<div class="outer"><div class="inner">innerContent</div></div>

CSS: 

div.outer {
    position: absolute;
    padding: 10px;
    background: purple;
}

div.inner {
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    background: orange;
    clip: auto; overflow: hidden;
}

JavaScript: 

$('.outer').click(function() { 
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow');
});

Ответы [ 4 ]

4 голосов
/ 28 мая 2009

Похоже, если я возьму ширину «внешнего» div и externalWidth «внутреннего» div, то вычту ширину «external» div из «external» width «inner» div и анимирую «external» width к результату одновременно, анимируя «внутренний» к 0, он работает.

Любые мнения о том, должен ли это быть запрос на исправление ошибки для jquery или webkit или обоих. 

$('.outer').click(function() { 
    var innerWidth = $('.inner').outerWidth();
    var outerWidth = $('.outer').width();
    var theWidth = outerWidth - innerWidth;
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow' );
    $('.outer').animate({width: theWidth}, 'slow');
});
1 голос
/ 28 мая 2009

Вы пытались установить ширину внешнего ящика на 0 после завершения анимации? 

$('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow', function() {
  $('.outer').css("width", 0);
});
0 голосов
/ 28 мая 2009

В моих тестах это прекрасно работает в IE, FF и Opera, но выдает ошибку, упомянутую в Chrome и Safari.

0 голосов
/ 28 мая 2009

Для меня в Firefox 3.0.10 с использованием jQuery 1.3.2 в Ubuntu 9.04 это работает отлично. Может быть, это какое-то взаимодействие с другими элементами HTML на вашей странице?

...