delay() và fadeOut() không trì hoãn attr() trong hàng đợi

Question

có gì sai trong mã này? Tôi đang cố gắng để có được hiệu ứng này: fadeOut(500) và attr('class','myClass') bị trễ 600 millisecs .. sau đó delay(600) lại và fadeIn(500). Sự chậm trễ xảy ra chính xác nhưng attr() không bị trì hoãn, nó sẽ cháy khi #myDiv vẫn đang mờ dần! :. '(

$('#myDiv').fadeOut(500) 
      .delay(600) 
      .attr('class','myClass') 
      .delay(600) 
      .fadeIn(500); 

Answer 1

Các .delay() chỉ ảnh hưởng đến hình ảnh động hoặc fx hàng đợi (trừ khi bạn chỉ định một hàng đợi khác nhau cụ thể) Hãy ghi nhớ rằng chaining và xếp hàng là 2 khái niệm khác biệt rõ rệt, chaining tiếp tục việc sử dụng jquery cùng thiết lập, nhưng đó là một điều hoàn toàn khác so với bất kỳ hàng đợi sự kiện trên các yếu tố trong tập hợp đó

để có cuộc gọi .attr() bị ảnh hưởng, bạn cần phải thêm nó như là một callback để cùng hàng đợi sử dụng .queue(), như thế này:.

$('#myDiv').fadeOut(500) 
      .delay(600) 
      .queue(function(next) { $(this).attr('class','myClass'); next(); }) 
      .delay(600) 
      .fadeIn(500); 

Cũng lưu ý có .addClass(), .removeClass() và .toggleClass() phương pháp có sẵn có thể làm điều này một chút bụi :)