使用 CSS opacity 和 Javascript 在滚动时淡入淡出

Question

我有一个 div 元素，我想在某个滚动点上淡入淡出，但我没有使用（慢）或（快）属性，而是使用了 CSS 不透明度，这样滚动时它仍然可见并在页面上下移动时更改不透明度。这用于顶部徽标并且效果很好，但由于某种原因，我找不到在第二个徽标上再次使用它的解决方案。到目前为止，您可以在我的网站上看到它的使用情况： http://abezieleniec.com/SIDWeb

HTML

<div class="jumbotronsecond">
  <div class="container">
    <div class="biglogo2">
      <img src="images/biglogofull.png">
    </div>
  </div>
</div>

CSS

.biglogo2 {
width:80%;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:130px;
margin-bottom:130px;
opacity:1;
}

JavaScript

$(function(){
    var fadeBegin = 500, 
    fadeFinish = 800, 
    fadingElement = $('.biglogo2');

    $(window).bind('scroll', function(){
       var offset = $(document).scrollTop(), opacity = 0; 
        if( offset <= fadeBegin ){
           opacity = 1; 
       } else if( offset <= fadeFinish ){
           opacity = 1 - offset / fadeFinish;
       }
     fadingElement.css('opacity',opacity);
    });

Answer 1

再三考虑，您发布了链接是件好事

<script src="js/vendor/jquery-scrollspy.js"></script>
<script src="js/vendor/jquery-1.10.1.min.js"></script>

您在需要它存在的扩展之后加载 jQuery 库。如果您查看控制台（在 Chrome f12 中然后单击控制台），您会看到 Uncaught ReferenceError: jQuery is not defined

您的代码运行良好，但您提供的内容不平衡 - 需要另一个 }); 才能关闭该 $(function(){。我已经缩进了你的代码来显示这一点。抱歉，我在 jsfiddle 中没有那么整洁。

http://jsfiddle.net/xtqLz/

为了让动画更流畅替换这条线

// fadingElement.css('opacity',opacity);
fadingElement.stop().animate({opacity: opacity}, 200);

这告诉 jQuery 将元素动画到下一个不透明度，但每次.stop()s 上一个动画，否则它们会排队。

http://jsfiddle.net/xtqLz/2/