javascript - 文本在滚动时缓和

Question

我创建了一个简单的 1 页网站，当您单击菜单链接时，它会滚动到所需的部分。 - 目前，我有它，所以特定部分的内容淡入非常缓慢，但我想改变效果，所以一旦页面向下滚动，内容就会从底部向上滑动，而不是淡入。

这是淡入淡出的javascript代码:

$(document).ready(function() {

/* 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).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it  */
        bottom_of_window = bottom_of_window + 800; 

        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window > bottom_of_object ){

            $(this).animate({'opacity':'1'},10000);

        }

    }); 

  });

});

CSS:

.fade-in { opacity: 0; }

有没有一种方法可以简单地操纵这段代码，使其将内容更改为向上滑动而不是淡入？

非常感谢任何反馈。

提前致谢。

简单修复(不理想但工作正常)

更改:

$(this).animate({'opacity':'1'},10000);

收件人:

$(this).animate({'margin-top':'0'},10000);

和 CSS 到:

.fade-in { margin-top: 1000px; }

Answer 1

由于您使用 jQuery，您可以按照文档中的说明使用 slideToggle():http://api.jquery.com/slidetoggle/

$(this).slideToggle()