Примените div CSS перед началом анимации, а не когда она заканчивается - PullRequest
Новая
       8

Примените div CSS перед началом анимации, а не когда она заканчивается

0 голосов
/ 15 ноября 2018

В этом паке У меня есть анимация jQuery UI (slideDown), которая отображает div.У div также есть атрибут margin-top:100px, который показывает его 100px ниже верхнего поля.

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

HTML 

<body style="background-color:blue">
   <div id="div1" style="background-color:orange;width:180px;height:40px;margin-top:100px"></div>
</body>

Javascript 

 $(function() {
    var div1 = $('#div1');
    div1.hide();

    setTimeout(function(){
       div1.slideDown();
    }, 1000);

 })

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Анимация slideDown начинается с 0 и сдвигает элемент в конечное положение.

Если вы хотите, чтобы слайд снизился с 100px сверху, добавьте обертку.

HTML 

<div class="wrapper">
  <div id="div1" style="background-color:orange;width:180px;height:40px;"></div>
</div>

CSS 

.wrapper {
  margin-top: 100px;
}

Теперь анимация начнется с высоты 100 пикселей сверху, а slideDown - просто с элементом div.

http://plnkr.co/edit/yqYTonJEBuggTU4OsQ6o?p=preview

Примечание: я вижу, у вас есть DIV с идентификатором 'div1', но в вашем CSS у вас есть определение класса для 'div1'. Селектор идентификатора #, где селектор класса .. Так что вы можете изменить его на #div1 {} в своем CSS, если вам нужно.

Надеюсь, это поможет.

0 голосов
/ 15 ноября 2018

HTML 

  <body style="background-color:blue">
  <div id="div1" class="div1"></div>
  </body>

JAVASCRIPT 

$(function() {
    var div1 = $('#div1');
    var b = div1.position();
    div1.hide();
    setTimeout(function(){
        div1.slideDown({top: "+" + b.top});
    }, 1000); 
})

CSS 

.div1 { width: 160px; height: 40px; position:absolute; border:1px solid black; background-color: orange; top: 50px; }

Пожалуйста, смотрите мою раздвоенную версию вашего Plunker. Позиция, а затем анимация

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...