我找到了这段代码:DEMO
当您在元素上滚动时，该元素会出现。但是，效果只是不透明度的变化。
我尝试在元素出现时添加关键帧动画，但是当第一个元素出现时，所有其他元素同时出现。
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).css({'opacity':'1'});
$('.e1').addClass('animated fadeInUp')
$('.e2').addClass('animated fadeInLeft')
}
});
});
});
最佳答案
您只需要告诉每个函数要向哪些元素添加动画并删除改变不透明度的位，不透明度的改变已经是动画的一部分。
$(document).ready(function () {
/* Every time the window is scrolled ... */
$(window).scroll(function () {
/* Check the location of each desired element */
$('.hideme').each(function (i) {
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
// Changes made here
if (bottom_of_window > bottom_of_object) {
if ($(this).hasClass('e1')) {
$(this).addClass('animated fadeInUp');
}
if ($(this).hasClass('e2')) {
$(this).addClass('animated fadeInLeft');
}
}
});
});
});
关于javascript - 带有关键帧的滚动条上的元素淡入淡出无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21463942/