javascript - 使用 CSS 不透明度和 Javascript 在滚动条上淡入淡出

Question

我有一个 div 元素，我想在某个滚动点淡入淡出，但我没有使用(慢)或(快)属性，而是使用了 CSS 不透明度，这样它在滚动时仍然可见并在页面上下移动时更改不透明度。这用于顶部 Logo 并且效果完美，但出于某种原因我找不到在第二个 Logo 上再次使用它的解决方案。到目前为止，您可以在我的网站上看到它正在使用: 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() 都是前一个动画，否则它们会排队。

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