Question

我的JavaScript目前看起来像这样：

    $(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).animate({ 'opacity': '1' }, 500);

            }

        });

    });

});

当我滚动到它时，这可以淡化元素。但是，我试图获得与许多wrapbootstrap网站上可以看到的相同的效果，其中项目也移动到位。这需要很长时间吗？它是否可以轻松修复我的代码？

以下是我想要获得的一个示例：http://wrapbootstrap.com/preview/WB0T75386

看看事情是如何移动到位并消失的？看起来很好。

Answer 1

如何使用css执行此操作的示例，您只需要JS来触发淡入。我已在代码中将.hideme重命名为.faded_out，因为这更符合其目的< / p>

$(document).ready(function () {

    /* Every time the window is scrolled ... */
    $(window).scroll(function () {
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* get the ones that are still faded out but should get visible */
        $('.faded_out').filter(function() {
            return bottom_of_window > $(this).offset().top + $(this).outerHeight();
        }).removeClass('faded_out');
    });
});

在dom

<div class="faded_out fade_in fade_in_from_right" > ... </div>

并在css中评论了每个特定类的含义

/* I am an element that is fading in */
.fade_in {
    opacity: 1;
    transform: none;
    transition: opacity linear 500ms, transform ease 500ms;
}

/* 
    this is the style I am fading in 
    by fading from this style, back to the defaults in .fade_in
*/
.faded_out.fade_in_from_right {
    opacity: 0;
    transform: translateX(50px);
}

如何使用JS

1 个答案: