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()是前一个动画，否则它们会排队。

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

使用CSS不透明度和Javascript滚动淡入和淡出

1 个答案: