Javascript 如何编辑jQuery动画出现在元素的中间?

Javascript 如何编辑jQuery动画出现在元素的中间?,javascript,jquery,css,animation,jquery-animate,Javascript,Jquery,Css,Animation,Jquery Animate,现在,一旦完整元素在窗口中可见,该元素就会淡入。有没有办法编辑这个,这样我可以更快地触发淡入淡出动画?理想情况下,当只有一半元素而不是整个元素可见时,将触发淡入淡出动画 以下是触发此动画的JavaScript: /* every time the window is scrolled ... */ $(window).scroll( function(){ /* check the location of each desired element */ $('.fade-in'

现在,一旦完整元素在窗口中可见,该元素就会淡入。有没有办法编辑这个,这样我可以更快地触发淡入淡出动画?理想情况下,当只有一半元素而不是整个元素可见时,将触发淡入淡出动画

以下是触发此动画的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);
        }
    });
});
});

无论是在if部分还是在计算中,试着把你的目标的底部减半

 /* 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);
            }
        });
    });
    });

无论是在if部分还是在计算中,试着把你的目标的底部减半

 /* 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);
            }
        });
    });
    });

将对象的
bottom\u
值更改为小于其原始高度的值

var bottom_of_object = $(this).offset().top + $(this).outerHeight() / 3; //we dived by 3 here at the end.

将对象的
bottom\u
值更改为小于其原始高度的值

var bottom_of_object = $(this).offset().top + $(this).outerHeight() / 3; //we dived by 3 here at the end.