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

有没有办法简单地操作这段代码，所以它会改变内容以便向上滑动而不是淡入？

非常感谢任何反馈。

提前致谢。

SIMPLE FIX（不理想，但工作正常）

更改：

$(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()

滚动文字轻松

SIMPLE FIX（不理想，但工作正常）

1 个答案: