如何从下到上淡入淡出

Question

我想要一些文字在滚动时从下到上淡入淡出。 现在我有这个代码：

$(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).offset().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).animate({'opacity':'1'},1000);
        }
    }); 
  });
});

现在它只是淡入，但我希望它从底部到顶部淡入淡出。 有什么想法吗？

Answer 1

将这行代码添加到动画选项中：

JavaScript：

if( bottom_of_window > bottom_of_object ){
    $(this).animate({'opacity':'1', 'margin-top':'50px'}, 500);
}

你的CSS：

#container .hideme { 
    opacity:0;
    margin-top: 200px;
}

通过这样做，您不仅可以为元素的opacity设置动画，还可以为其margin-top属性设置动画，从而在将50px移动到底部时有效淡出。