Я создал приведенный ниже скрипт плавного перехода и скольжения, который мне не удается реализовать на моем веб-сайте. Скрипт не запускается, и я не могу понять почему. Любая помощь будет оценена, спасибо!

Сценарий https://jsfiddle.net/5bj4gf5v/

$( document ).ready(function() {
    $('.ZeroSecDelay').delay(500).animate({opacity:1, top: -100}, 'slow', function() {
    });
    return false;
});

Страница Я тоже пытаюсь это реализовать http://digitalmedia.rocks/contact-me/

0
Cozmoz 20 Фев 2016 в 16:58

2 ответа

Лучший ответ

Попробуйте использовать Window onload вместо DOM ready.

  • document.ready запускается, когда DOM готов, например все элементы там можно найти / использовать, но не обязательно весь контент.

  • window.onload срабатывает позже, когда загружаются изображения и все содержимое страницы

Анимация должна работать, также вы пытаетесь увеличить задержку, чтобы она соответствовала анимации после загрузки страницы.

.ZeroSecDelay {
  position:relative;
  opacity: 0;
  margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slideUp ZeroSecDelay">
<a href="https://twitter.com/dmrocksuk" target="_blank"><img src="http://digitalmedia.rocks/wp-content/themes/wpbootstrap/bootstrap/img/twitter.svg" alt="Twitter" width="64px" height="64px" /></a>
</div>

<script>
$(window).bind("load", function() {
    $('.ZeroSecDelay').delay(500).animate({opacity:1, top: -100}, 'slow', function() {
    });
    return false;
});
</script>
1
faiyaz syed 20 Фев 2016 в 14:35

На сайте CSS Tricks есть хорошие jquery и фронтенд-приемы. Попробуйте сами.

https://css-tricks.com/snippets/jquery/

1
faiyaz syed 20 Фев 2016 в 14:52