Блог

хорошо, итак, я пытаюсь воспроизвести эту анимацию в верхней части этого веб-сайта: http://www.infinvision.com/insights-and-musings.html

У меня анимация работает, контейнер div анимируется в верхней части экрана правильно. однако в моей версии содержимое внутри div просто остается там, в то время как окружающий div закрывается вокруг него. На веб-сайте, который я копирую, содержимое, похоже, увеличивается с закрытием div. Я попытался установить значение позиции div в абсолютное значение и попытаться анимировать свойство top равным нулю, однако это не работает. Есть предложения?????

спасибо, Дэниел.

РЕДАКТИРОВАТЬ: HTML-код, который я использую:

 <div id="toplogin">
  <div class="container">
    <div id="toploginWrap">
    <div id="topLwrap"> MORE STUFF HERE  </div>
    <div id="topRwrap">
      <h3><span>LOGIN</span>
      </h3>
      <form id="topLoginFm" action="" method="POST">
         MORE STUFF HERE 
      </form>

    </div>
    </div>
  </div>
</div>
  

Код JAVASCRIPT, который я использую:

 window.onload = function(){
    $('#loginButton').click(function() {
    $('#toplogin' ).animate({
        padding: 0,
        margin:0,
        height: 'toggle'

  }, 1000, function() {

    });

});
};



</script>
  

Чтобы содержимое перемещалось вверх вместе с закрывающимся разделом, см.http://jsfiddle.net/g_thom/CPHxq/2 /.

Фиксирование положения div сохраняет его на месте по мере продвижения содержимого вверх.

Пожалуйста, обратитесь к этому http://jsfiddle.net/79qvv/1 /

Единственное изменение, которое я сделал, это то, что я не использую window.Загрузка… Вместо этого я привязываю обработчик щелчков, как только dom будет готов. Обычно вы бы сделали это следующим образом

 <script type="text/javascript">
$(function() {
    //your custom code here ...
});
</script>
  

Остальной код в скрипте — это именно то, что вы опубликовали… Надеюсь, это помогло…