Question

我正在尝试通过使用我的弱JQuery技能将虚拟文本从#crossfade更改为animation-play-state : paused;来将虚拟文本滚动到div容器animation-play-state : running;时激活动画。

当#crossfade是＆lt;来自topOfwindow的100px动画应该激活，但是我无法使其工作。

有谁知道我做错了什么？

小提琴： http://jsfiddle.net/pc4mur9s/40/

HTML

<div>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text </div>


<div id="crossfade">

  <img src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/192648/file/19264814294Sny2.jpg" >
  <img src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/192648/file/19264814294uIB9.jpg" >
  <img src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/192648/file/19264814294HQqq.jpg" >
  <img src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/192648/file/19264814294JK0g.jpg" >
</div>

CSS

#crossfade > img { 
    width: 957px;
    height: 599px;
    position: absolute;
    margin: 0;
    opacity: 0;
    -webkit-animation: imageAnimation 10s;
    -webkit-animation-play-state : paused;
}

#crossfade > img:nth-child(2)  {
    -webkit-animation-delay: 2.5s;
}
#crossfade > img:nth-child(3) {
    -webkit-animation-delay: 5s;
}
#crossfade > img:nth-child(4) {
    -webkit-animation-delay: 7.5s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    15% { opacity: 1;}
    100% { opacity: 1;}
}

JQuery的

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

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+100) {
           $("img", this).addClass("imageAnimation")[0]
            .style.webkitAnimationPlayState = "running";
        }
    });
});

Answer 1

首先，你没有在你的小提琴中加入jQuery。

其次，这：

$("img", this).addClass("imageAnimation")[0].style.webkitAnimationPlayState = "running";

只会更改第一张图片的播放状态，请尝试改为：

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

        var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow + 100) {
            $("img", this).addClass("imageAnimation").each(function () {
                this.style.webkitAnimationPlayState = "running";
            });
        }
    });
});

更新了小提琴：http://jsfiddle.net/pc4mur9s/41/

使用JQuery滚动到div后动画？

1 个答案: