delay(）函数不能与jquery中的addClass(）函数一起使用

delay() function does not work with addClass() function in jquery

本文关键字：函数 一起 addClass 不能 delay jquery 中的      更新时间：2024-04-01

当我在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");
    });
});

使用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();
               });
});

方法1setTimeout()

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

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

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

最简单的方法可能是：

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

.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>

相关文章：