Question

isScrolledIntoView函数已经多次讨论过了。然而，我会在这里有一个特别的东西可以淡入淡出。

问题：下面的代码应该让各个项目一个接一个地显示。所以这些随着延迟逐渐出现。然而，在这里，它们同时被调用。否则，它就像我想象的那样工作。

提前感谢您的帮助。

        function isScrolledIntoView(elem) {
            var docViewTop = jQuery(window).scrollTop();
            var docViewBottom = docViewTop + jQuery(window).height();

            var elemTop = jQuery(elem).offset().top;
            var elemBottom = elemTop + jQuery(elem).height();

            return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
        }

        jQuery(window).scroll(function () {
            if (isScrolledIntoView('#fadein_product1')) {
                jQuery('#fadein_product1 img.fading').each(function() {
                inImgViewproduct1 = true;
                var delay = 500;
                    jQuery(this).delay(delay).fadeIn(2000);
                    delay += 300;                           
                });
            }
            else {
                inImgViewproduct1 = false;
                jQuery('#fadein_product1 img.fading').fadeOut();
            }

Answer 1

我设法使用CSS不透明度和不同的滚动功能让它更好地工作。我还在每个（）函数中添加了一个setTimeout。

的jQuery

function isScrolledIntoView(elem)
 {
    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();
    var elemTop = jQuery(elem).offset().top;
    var elemBottom = elemTop + jQuery(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
 }



jQuery(window).on('scroll', function(e) {

    if (isScrolledIntoView('#fadein_product1')) {
       inImgViewproduct1 = true;
       jQuery('#fadein_product1 .fading').each(function(i) { 
           var el=jQuery(this);
           setTimeout(function() { 
               el.removeClass('fade');
           }, i * 300); 
       });
   } else {
       jQuery('#fadein_product1 .fading').addClass('fade');
   }
});

CSS

.fading {
    opacity: 1;
    transition: opacity .3s;
    -ms-transition: opacity .3s;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
}
.fading.fade {
    opacity: 0;
}

Answer 2

var $pc_subscription_form_wrapper = $('.pc_subscription_form_wrapper');
    var $window = $(window);
    function scroll_removeclass() {
        var window_height = $(window).height() - 0;
        var window_top_position = $window.scrollTop();
        var window_bottom_position = (window_top_position - window_height);

        $.each($pc_subscription_form_wrapper, function() {
            var $element = $(this);
            var element_height = $element.outerHeight();
            var element_top_position = $element.offset().top;
            var element_bottom_position = (element_top_position - element_height);

            if ((element_bottom_position <= window_top_position) &&
                (element_top_position >= window_bottom_position)) {
                $element.removeClass('form_is_show');
            }
        });
    }

    function scroll_addclass() {
        var window_height = $(window).height() - 0;
        var window_top_position = $window.scrollTop();
        var window_bottom_position = (window_top_position + window_height);

        $.each($pc_subscription_form_wrapper, function() {
            var $element = $(this);
            var element_height = $element.outerHeight();
            var element_top_position = $element.offset().top;
            var element_bottom_position = (element_top_position + element_height);

            if ((element_bottom_position >= window_top_position) &&
                (element_top_position <= window_bottom_position)) {
                $element.addClass('form_is_show');
            }
        });
    }

    

    $window.on('scroll resize', scroll_removeclass);
    $window.on('scroll resize', scroll_addclass);
    $window.trigger('scroll');

<div class="pc_subscription_form_wrapper"></div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

isScrolledIntoView用于对象列表

2 个答案: