实现淡入淡出和滑动脚本时遇到问题

Question

我在下方创建了一个淡入淡出和滑动脚本，但我在尝试将其应用到我的网站时遇到了问题。该脚本没有运行，我不明白为什么。任何帮助将不胜感激，谢谢！

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

页面我也在尝试实现它 http://digitalmedia.rocks/contact-me/

Answer 1

尝试使用 Window onload 而不是 DOM ready。

document.ready 在 DOM 准备就绪时运行，例如所有元素都是会有found/used，但不一定是所有内容。
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>

Answer 2

CSS 技巧网站有很好的 jquery 和前端技巧。试试吧。

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

实现淡入淡出和滑动脚本时遇到问题

Trouble implementing fade and slide script

debugging

wordpress

jquery

implementation

twitter-bootstrap