Question

当我在addClass（）函数之前使用delay（）函数时，类circle1不会延迟一段时间。

我的代码如下......

CSS：

.but{display:block; width:40px; height:40px; background-color:#F00; position:absolute;}

.circle1{display:block; width:145px; height:145px; position:absolute; left:10px; bottom:0px; border-radius:50%; border:5px solid rgba(100%,0%,20%,0.7); background-image:url(New%20folder/1st.jpg); background-position:center; background-repeat:no-repeat; background-size:cover; transform:scale(0);}
.zoom{transform:scale(1); transition:All 0.4s ease;}

JQuery的：

$(document).ready(function() {
    $(".but").click(function() {
         $('.but').fadeOut(300);
         $('.circle1').delay(1000);
         $('.circle1').addClass("zoom");
    });
});

Answer 1

使用setTimeout，因为.delay()用于处理队列，因为addClass()不使用队列。

$(".but").click(function() {
     $('.but').fadeOut(300);
     setTimeout(function(){
         $('.circle1').addClass("zoom");
     }, 1000);        
});

或，您可以使用.queue

$(".but").click(function() {
     $('.but').fadeOut(300);    

     $('.circle1').delay(100)
               .queue(function() {
                   $(this).addClass("zoom");
                   $(this).dequeue();
               });

});

Answer 2

方法1 setTimeout()

$(".but").click(function() {
         $('.but').fadeOut(300);
         setTimeout(function(){$('.circle1').addClass("zoom")},1000);
    });

方法2 .queue

$(".but").click(function() {
    $('.but').fadeOut(300);
    $('.circle1').delay(1000).queue(function () {
        $('.circle1').addClass("zoom");
    });
});

Answer 3

.delay()仅适用于在同一DOM对象上使用动画队列的jQuery方法。因此，由于.addClass()不使用动画队列，因此它不与.delay()合作。

您可以通过排队功能触发addClass()，也可以只使用setTimeout()。

最简单的方法可能就是：

$(document).ready(function() {
    $(".but").click(function() {
         $('.but').fadeOut(300);
         setTimeout(function() {
             $('.circle1').addClass("zoom");
         }, 1000);
    });
});

Answer 4

.delay()方法在队列系统的帮助下工作，因此它将延迟下一个队列中下一个方法的执行（默认队列是fx队列）。 addClass方法没有使用队列执行，这就是它无法正常工作的原因。

您可以使用queue()方法添加一个将目标元素的类添加到队列的函数，如

$(document).ready(function() {
  $(".but").click(function() {
    $('.but').fadeOut(300);
    $('.circle1').delay(1000).queue(function() {
      $('.circle1').addClass("zoom");
    });
  });
});

.zoom {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="but">but</button>
<div class="circle1">div</div>

delay（）函数不适用于jquery中的addClass（）函数

4 个答案: