Question

所以我试图让我的交叉渐变图像动画加载到距离页面顶部一定距离，100px。我尝试添加以下JQuery，但我似乎无法让它工作。我做错了什么？

感谢您的帮助，谢谢！

我已将来源上传到此处http://jsfiddle.net/6c8w76bx/12/

提前致谢。

HTML：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id="cf3" class="cf3FadeIn">
<img class="bottom" src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/192648/file/192648142935Bv3.jpg" alt="192648142935Bv3.jpg">
  <img class="top" src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/192648/file/1926481429316kf.jpg" alt="1926481429316kf.jpg">
  </div>

CSS：

@-webkit-keyframes cf3FadeIn {
   0% {
     opacity:1;
   }
   25% {
    opacity:1;
  }
  75% {
    opacity:0;
  }
  100% {
   opacity:0;
 }
}

.cf3FadeIn {
  position:relative;
  height:544px;
  width:957px;
  margin:0 auto;
}
.cf3FadeIn img {
  position:absolute;
  left:0;
}

.cf3FadeIn img.top {
  -webkit-animation-name: cf3FadeIn;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 5s;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0s;
  -webkit-animation-fill-mode: forwards;
}

JQuery的：

  $(window).scroll(function() {
    $('#cf3').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+100) {
            $(this).addClass("cf3FadeIn");
        }
    });
});

Answer 1

删除了滚动：http://jsbin.com/hehide/edit

添加“活跃”课程或任何您想要的内容......

.cf3FadeIn img.top.active {
  -webkit-animation-name: cf3FadeIn;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 5s;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0s;
  -webkit-animation-fill-mode: forwards;
}

并将选择器添加/更改为：

  $('.top').addClass("active");

这只是处理它的一种方法，真正的问题是你的元素需要在事件发生时添加动画（通过添加具有动画的类），而不是之前，这是假设你的滚动逻辑工作。

Answer 2

尝试

CSS

#cf3 img.top {
  -webkit-animation-name: cf3FadeIn;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 5s;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0s;
  -webkit-animation-fill-mode: forwards;
  /* set `paused` `animation-play-state` value */
  -webkit-animation-play-state : paused; 
}

JS

  $(window).scroll(function() {
    $('#cf3').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+100) {
            // substitute `$("img.top", this)` selector : `img.top`
            // for `$(this)` selector : `div#cf3` DOM element 
            // set "running" `animation-play-state` value
            $("img.top", this).addClass("cf3FadeIn")[0]
            .style.webkitAnimationPlayState = "running";
        }
    });
});

jsfiddle http://jsfiddle.net/guest271314/6c8w76bx/63/embedded/result/

另请参阅animation-fill-mode，animation-direction

交叉淡入淡出动画

2 个答案: