更新

Question

我从未使用过fullpage.js。我尝试了很多滑块过渡效果。使用滑块效果滚动很好。它通过滚动从左向右移动但不能添加fadeIn和fadeOut效果。

示例网站：http://www.mi.com/shouhuan/#clock 我的代码：http://jewel-mahmud.com/demo-site/index.html

var slideIndex  = 1,
    sliding     = false;

$(document).ready(function() {

    $('#fullpage').fullpage({

        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
        scrollingSpeed:1000,
        css3: true,

        onLeave: function(index, nextIndex, direction) {

            if(index == 2 && !sliding) {

                if(direction == 'down' && slideIndex < 3) {

                    sliding = true;
                    $.fn.fullpage.moveSlideRight();
                    slideIndex++;
                    return false;

                } else if(direction == 'up' && slideIndex > 1) {
                    sliding = true;
                    $.fn.fullpage.moveSlideLeft();
                    slideIndex--;
                    return false;
                }

            } else if(sliding) {

                return false;

            }

        },

        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {

            sliding = false;

        }

    });
});

Answer 1

这些页面讨论了添加淡入淡出效果：

似乎主要是使用fullpage.js幻灯片事件来触发jQuery动画。

This jsfiddle似乎做你想做的事（使用部分）。

看起来有两种方法可以做这种事情，这取决于你想要制作动画的内容。 fullpage.js内置了两种视图.section和.slide，幻灯片是节的子节点，它们有不同的回调。这些例子使用幻灯片，但你正在使用部分，所以我认为这就是混乱的来源。转换为淡入淡出效果需要挂钩到正确的回调并应用正确的动画（部分和幻灯片之间不同）。

Answer 2

我正在使用一些简单而有效的东西。

if (res.status === 401)

但问题是我滑动时无法修复滚动。我试过先生。但我不能调整它。

Answer 3

取自this answer。虽然在fullpage.js中定义的滚动速度不会在这里生效，但你必须在CSS中定义它，这远非完美。此外，它仅适用于部分而非水平幻灯片。

只需添加以下CSS即可覆盖fullpage.js样式。

.section {
    text-align: center;
}

.fullpage-wrapper {
    width: 100%!important;
    transform: none!important;
}

.fp-section {
    width: 100%!important;
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 0;
    transition: all .7s ease-in-out;
}

.fp-section.active {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}

更新

现在可以通过a fullpage.js extension来完成。

fullpage.js添加滑块淡入效果

3 个答案:

更新