Question

在滑块中包括三张幻灯片，当单击第一张幻灯片时，它会添加类并剪辑（隐藏），与第二张和第三张幻灯片相同。

HTML代码

<div class="wrapper">
    <div class="slides">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
    </div>
</div>

CSS代码

.slider-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    color: #fff;
    background: #000;
}

.slide {
    position: absolute;
    width: 95%;
    height: 100%;
    padding: 80px 40px; 
    text-align: center;
    background: #333;
    clip: rect(0 1060px 660px 0);
    -webkit-transition: linear .5s;
    transition: linear .5s;

}
.slide:nth-child(1) {
    background-color: #404040;
    z-index: 3;
}
.slide:nth-child(2) {
    z-index: 2;
}
.slide:nth-child(3) {
    background-color: #404040;
    z-index: 1;
}
.slide-clip {
    clip: rect(0 0 660px 0);
}

jQuery代码

$('.slide').click(function() {
  var $target = $(this).next();
  if ($target.length == 0)
    $target = $('.slide:first');

  $(this).delay(1000).addClass('slide-clip');
  $target.removeClass('slide-clip');
});

我希望第二张幻灯片在其之前或之后在第三张幻灯片的后面添加类和剪辑（隐藏）时，第一张幻灯片会松开，与第三张幻灯片的单击相同，第二张幻灯片会在第一张幻灯片的后面松开。

Answer 1

delay()方法仅适用于jQuery动画队列，因此不会对addClass()方法造成任何延迟。要在1秒钟后添加class，可以使用setTimeout方法。

setTimeout(() => $(this).addClass('slide-clip') , 1000);

如何在添加类div后面添加类延迟或删除类执行？

1 个答案: