如何编辑 jQuery 动画以显示在元素中间？答案

【问题标题】：How do I edit a jQuery animation to appear in the middle of an element?如何编辑 jQuery 动画以显示在元素中间？
【发布时间】：2016-09-09 10:44:07
【问题描述】：

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

【问题讨论】：

标签： javascript jquery css animation jquery-animate

【解决方案1】：

将bottom_of_object 的值更改为小于原始高度的值

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

【讨论】：

【解决方案2】：

在 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);
            }
        });
    });
    });

【讨论】：