如何从下到上淡入

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移至底部时有效地使其淡出。