как сделать так, чтобы animate.css (плагин) мгновенно работал при загрузке живого сайта?

0

Я попробовал animate.css-библиотеку, которая отлично работает в моих локальных хостах и jsfiddle, но на реальном сайте она не предпринимает немедленных действий, что означает, что опция animate для конкретного div не выполняется в самом начале, а div сначала появляется в указанной позиции то он приходит от вершины или любого другого эффекта, который я даю.

Я думаю, что это может быть проблема загрузки сервера. Возможно, из-за медленной загрузки я смогу увидеть фактическое положение сначала, тогда происходит анимация класса css. Не знаю, как это сделать.

Jsfiddle с кодом, как на сайте, но в js, он работает нормально.

Я попытался дать класс непосредственно в самой разметке вместо js, потому что я думал, что js может загружаться в последнее время, хотя я могу видеть статическую позицию при загрузке сайта, тогда анимация происходит сверху вниз

<div id="box" class="animated fadeInDownBig">Checking</div>

Я тоже пытался использовать js, но никакого эффекта. Любая идея о том, что здесь происходит?

  • 1
    Когда я перезагружаю jsfiddle.net/WL9da/1/show , он сразу же исчезает .
  • 0
    Я сказал об этом сам вопрос. Это работает в JS Fiddle, но не на живом сайте
Показать ещё 1 комментарий
Теги:
animation

1 ответ

0
Лучший ответ

Это связано с тем, что ваш HTML-код div отображается в браузере сразу и, как вы звоните

$(document).ready(function(){
  $('#box').addClass('animated fadeInDownBig');
});

после загрузки документа. Таким образом, он просто работает в соответствии с вашим кодом после загрузки документа, он добавляет ваш анимированный эффект fadeInDownBig. если библиотека, которую вы используете, является просто простым файлом CSS, тогда я бы рекомендовал вам это вместо вызова после загрузки документа

<div id="box" class="animated fadeInDownBig">Checking</div>

И если вы получили другие js файлы и т.д. В своей библиотеке, то используйте этот код

#box {
width:60%;
height:60%;
left:20%;
top:20%;
background-color:red;
position:fixed;
display:none;
}

<div id="box" class="animated">Checking</div>

$(document).ready(function(){

  $('#box').css('display','block').addClass('fadeInDownBig');
});

И если вы говорите, что это нормально работает на вашем локальном хосте, это может быть связано с тем, что он загружает каждую библиотеку и файлы сразу на localhost, так что $ (document).ready вызывается немедленно.

Поделиться
  • 0
    Вот почему я попытался использовать разметку вместо js, например <div id="box" class="animated fadeInDownBig">Checking</div> хотя это не дает немедленного эффекта. Спасибо
  • 0
    Ваша проблема решена?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню