使用JQuery滚动到div后的动画效果？

Question

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

当#crossfade是<从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

第一O形f all，你没有在你的小提琴中包含jQuery。

其次，这样的：

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

只会改变你的第一个形象的playstate，试试这个来代替：

$(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/