使用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/