javascript - 如何使用 JS 引入移动和淡入淡出元素

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，因为这适合更好的目的

$(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');
    });
});

在国内

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