Javascript 如何管理Jquery切换淡入淡出动画的队列？

问题

在上一个切换动画完成之前，如何防止jquery切换函数运行

我有一个简单的脚本来显示或隐藏数据，这取决于是否选中复选框

JQUERY

$('.a').hide();
$('#CB').change(function () {
    if ($(this).is(':checked')) {
        $('.b').fadeOut(100, function () {
            $('.a').fadeIn();
        });
    } else {
        $('.a').fadeOut(100, function () {
            $('.b').fadeIn();
        });
    }
});

问题

当事件连续触发时，两个元素（在本例中，

.a

和

.b

一起可见）。我认为这是因为在再次启动函数之前，之前的请求没有完成

使用jquery stop（）

---

你说得对。jQuery中的动画是异步工作的，因此它们有时可以同时运行

为了回答你的问题，我想你已经在你的问题标题中回答了

使用队列。

设置一个标志，将其命名为类似于

isfacing

，当

$（“#CB”）

更改时为true，则将其改为排队

var isFading=false;
var animationQueue = [];
$('#CB').change(function () {
  if(isFading){
    if ($(this).is(':checked')) {
      animationQueue.push(fadeOutFadeIn);
    }
    else {
      animationQueue.push(fadeInFadeOut);   
    }
  }
  else{
    if ($(this).is(':checked')) {
        fadeOutFadeIn();
    } else {
        fadeInFadeOut();
    }
  }
);


function fadeOutFadeIn(){
  isFading=true;
  //insert your fadeout fadein code here
  isFading=false;

  if(animationQueue.length > 0)
    //you're now calling the queued animation to go through
    animationQueue.splice(0,1)();
}

function fadeInFadeOut(){
  isFading=true;
  //insert your fadein fadeout code here
  isFading=false;

  if(animationQueue.length > 0)
    //you're now calling the queued animation to go through
    animationQueue.splice(0,1)();
}

---

有点紧张，但我感谢你抽出时间想出解决办法谢谢。我已经知道了。也停下来。这正是我想要的，一个非常清晰的答案。干得好。

var isFading=false;
var animationQueue = [];
$('#CB').change(function () {
  if(isFading){
    if ($(this).is(':checked')) {
      animationQueue.push(fadeOutFadeIn);
    }
    else {
      animationQueue.push(fadeInFadeOut);   
    }
  }
  else{
    if ($(this).is(':checked')) {
        fadeOutFadeIn();
    } else {
        fadeInFadeOut();
    }
  }
);


function fadeOutFadeIn(){
  isFading=true;
  //insert your fadeout fadein code here
  isFading=false;

  if(animationQueue.length > 0)
    //you're now calling the queued animation to go through
    animationQueue.splice(0,1)();
}

function fadeInFadeOut(){
  isFading=true;
  //insert your fadein fadeout code here
  isFading=false;

  if(animationQueue.length > 0)
    //you're now calling the queued animation to go through
    animationQueue.splice(0,1)();
}