Question

我有一些代码，当用户向下滚动并点击该点时，它将启动动画。我希望它向下滑动，但目前只有滑动切换工作 - 它不断打开和关闭。我怎样才能让它滑下来？

$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.research-revealed').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).slideToggle( "slow", function() {
                // Animation complete.
            });

        }

    }); 

});

Answer 1

一旦达到所需的点，设置一个标志以指示它已设置动画。

var animated = false;

$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.research-revealed').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 && animated == false ){
            animated = true;
            $(this).slideToggle( "slow", function() {
            // Animation complete.
            });
        }
    });
});

您也不应将此绑定到窗口滚动事件，而是使用requestAnimationFrame或以间隔限制事件。您也应该在触发动画后删除该事件。

[更新] 更进一步......

所以这里是我用来处理这类事情的模块组合。我写这个是为了特定的目的，指出元素何时在视图内或视图外，以及跟踪用户滚动的方向。

http://codepen.io/jasonhulbert/pen/ZbNoZG

在JS中，您将看到一个polyfill和两个模块。我通常不会将它们包含在此处看到的相同文件中，但我只是粘贴它们并将它们包装在SEAF闭包中。我通常将它们用作commonJS模块。 polyfill用于window.requestAnimationFrame，我创建的两个模块是FrameEvent和InView。

FrameEvent是一个简单的脚本，用于管理滚动和调整使用requestAnimationFrame的回调。

InView是我用来跟踪视图“在”或“视线外”（窗口）的元素。当用户滚动时，它会将属性data-inview的值切换为in或out。它还指示属性scroll-direction中正文的滚动方向。您还可以关联元素进入或退出视图时触发的回调（这在您的情况下很有用）。

InView实例化如此（这包含在JS的底部）：

var inview = new InView();
inview.addStage({
    element: '.item'
});

以下是您可以传递给.addStage()的所有选项：

element: 'section', // the element to look for
attr: 'data-inview', // the name of the inview attribute
inVal: 'in', // the value of the attribute when in view
outVal: 'out', // the value of the attribute when out of view
offsetTop: 0, // pixels
offsetBottom: 0, // pixels
delayIn: 0, // in milliseconds
delayOut: 0, // in milliseconds
inCallback: false, // callback when element comes into view
outCallback: false // callback when element goes out of view

因此，在您的情况下，您可以使用InView（A）通过使用css中的选择器（如.item[data-inview="in"] { //...props }）或（B）将inCallback选项设置为函数来应用css属性触发您当前使用的动画。回调中this的上下文将是元素。

所以，就是这样。

var inview = InView();
inview.addStage({
    element: '.item', // the element you're looking for
    offsetTop: 100, // wait until the element is 100px within view
    inCallback: function(el) {
       $(el).slideToggle(); // do your animation stuffs
    }
});

即使您不想使用它，也可以查看.checkStagePositions方法，以查看如何计算元素相对于窗口的位置的示例。我知道，这个函数有点混乱 - 我需要进行一些重构，然后将一些逻辑划分为不同的方法。

Answer 2

api.jquery.com：

slideDown() - Description: Display the matched elements with a sliding motion.

因此，如果要隐藏元素，则必须使用slideUp() - Description: Hide the matched elements with a sliding motion.。别担心，看起来它会滑下来。见FIDDLE

滚动时获取div以向下滑动

2 个答案: