Question

我试图淡化元素与＆＃34;淡出我＆＃34;每当这些元素进入视野时。我找到了这个小提琴：http://jsfiddle.net/tcloninger/e5qad/并且它完成了这个确切的事情，但它将不透明度值重复添加到进入视图的元素中。如果我试图使用Velocity的过渡slideUpIn而不是不透明度，这会创建一个循环动画。所以我有以下代码：

$(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).velocity('transition.slideUpIn', { stagger: 700 }).delay(1000)     
            }
        }); 
    });
});

它可以工作，但它会循环SlideUpIn动画。如何让它在进入视图的元素上只运行一次动画？

Answer 1

将CSS类切换为指示符，然后检查它：

var $window = $(window);
var $doc = $(document);
var $hideMe = $('.hideme');

$doc.ready(function () {

    $window.scroll(function () {
        var bottom_of_window = $window.scrollTop() + $window.height();

        $hideMe.each(function (i) {
            var $elm = $hideMe.eq(i);
            var bottom_of_object = $elm.offset().top + $elm.outerHeight();

            if (bottom_of_window > bottom_of_object) {
                if (!$elm.hasClass('in-viewport')) {
                    $elm.addClass('in-viewport');
                    $elm.velocity('transition.slideUpIn', { stagger: 700 }).delay(1000);
                }
            } else {
                $elm.removeClass('in-viewport');
            }
        }); 

    });

});

当元素进入视口时淡入元素

1 个答案: