Question

我创建了一个淡入淡出和幻灯片脚本，如下所示，我无法尝试实施到我的网站。脚本没有运行，我无法弄清楚原因。任何帮助将不胜感激，谢谢！

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

Page我也试图实现它 http://digitalmedia.rocks/contact-me/

Answer 1

尝试使用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>

Answer 2

CSS Tricks网站有很好的jquery和前端技巧。尝试一下。

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

无法实现淡入淡出和滑动脚本

2 个答案: