Question

我是jQuery的新手，基本上只进行了一次幻灯片转换，它具有最小和紧凑的代码：

$(function () {
    var str_next = $('.cara .item').eq(1);

    function slide(elem) {
        elem.addClass('next');

        $('.cara .item').each(function() {
            if ($(this).hasClass('active')) {
                console.log('does have it');
                $(this).removeClass('active');
            }
        });

        setTimeout(function () {
            elem.removeClass('next').addClass('active');
        }, 2000);
    }

    slide(str_next);
});

Fiddle here

如果仔细查看jQuery，以下几行代码会导致一个幻灯片转换效果：

setTimeout(function(){
    elem.removeClass('next').addClass('active');
}, 2000);

现在要进行过渡效果，将next类附加到elem非常重要，但在上面的代码中，next类正在从{{elem中删除1}}并且仍有转换，为什么？

例如，如果我要将上面的代码行更改为如下：

setTimeout(function(){
    elem.removeClass('next');
    setTimeout(function() {
        elem.addClass('active');
    }, 500);
}, 2000);

没有过渡，所以下面的工作如何：

setTimeout(function(){
    elem.removeClass('next').addClass('active');
}, 2000);

为什么要暂时移除next课程？

Answer 1

转换不起作用，因为它依赖于图像的定位。

在图片滑入视图之前，其display属性设置为none，使其不可见且位置不变。

通过添加下一个类，项目的位置设置为左：100％，这会使它向右移动，实际上不在视图之外。

当您现在删除下一个类并添加活动类时，图像的显示属性设置为阻止，使其可见，并通过删除下一个类，图像返回到其原始位置（您可以在其中看到它）动画之后）。

现在，如果您首先移除下一个类，图像将在不可见的情况下移动到其原始位置，这就是为什么没有动画。

所以回答你的问题：下一节课为动画动画提供一个起始位置，如果图像不在起始位置，它不必移动，所以没有动画。

编辑说明：转换始终在后台播放，只是因为添加了活动类，它才变得可见。因此，即使您在添加活动类之前删除了下一个类，转换也会开始播放并变为可见。转换来自下一个类导致的位置差异，图像的可见性来自活动类，这些是完全独立的。因此，在删除下一个课程时总是会进行转换，但它根本不可见。

了解简单的轮播转换代码

1 个答案: