I am using this code from JS Fiddle to create a fade animation with elements on a web page.现在,一旦完整元素在窗口中可见,元素就会淡入。有没有办法编辑这个,所以我可以更快地触发淡入淡出动画?理想情况下,当只有一半元素可见而不是整个元素时,将触发淡入淡出动画。
以下是触发此动画的JavaScript:
/* every time the window is scrolled ... */
$(window).scroll( function(){
/* check the location of each desired element */
$('.fade-in').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* if the object is completely visible in the window, fade it in */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},600);
}
});
});
});
答案 0 :(得分:1)
尝试在if部分或计算
中将你的bottom_of_objekt减半 /* every time the window is scrolled ... */
$(window).scroll( function(){
/* check the location of each desired element */
$('.fade-in').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* if the object is completely visible in the window, fade it in */
if( bottom_of_window > (bottom_of_object / 2) ){
$(this).animate({'opacity':'1'},600);
}
});
});
});
答案 1 :(得分:1)
将bottom_of_object
值更改为小于原始高度
var bottom_of_object = $(this).offset().top + $(this).outerHeight() / 3; //we dived by 3 here at the end.