jQuery 如果另一个是运行，则阻止动画触发

Question

我有一些简单的淡入淡出函数可以触发 div 的淡入淡出 outs/ins。但是，如果您垃圾邮件单击按钮，它们都会开始运行并且看起来很糟糕。我想要的是仅在 none 当前为运行时才触发该功能。

$('.a').click(function(){
  $('#about, #contact').fadeOut(500);
  $('#welcome').delay(500).fadeIn(500);
})
$('.b').click(function(){
  $('#welcome, #contact').fadeOut(500);
  $('#about').delay(500).fadeIn(500);
})
$('.c').click(function(){
  $('#about, #welcome').fadeOut(500);
  $('#contact').delay(500).fadeIn(500);
})

Answer 1

您可以将元素的褪色状态存储在变量中，并在褪色之前检查状态。在这种情况下，我添加了 running 变量。

var running = false;
$('.a').click(function(){
  if (!running){
    running = true;
    $('#about, #contact').fadeOut(500);
    $('#welcome').delay(500).fadeIn(500, function(){
      running = false;
    });
  }
})
$('.b').click(function(){
  if (!running){
    running = true;
    $('#welcome, #contact').fadeOut(500);
    $('#about').delay(500).fadeIn(500, function(){
      running = false;
    });
  }
})
$('.c').click(function(){
  if (!running){
    running = true;
    $('#about, #welcome').fadeOut(500);
    $('#contact').delay(500).fadeIn(500, function(){
      running = false;
    });
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a">aaa</div>
<div class="b">bbb</div>
<div class="c">ccc</div>
<div id="welcome">welcome</div>
<div id="about">about</div>
<div id="contact">contact</div>

您也可以简化代码，如底部所示

var running = false;
$('.button').find('.a, .b, .c').click(function(){
  if (!running){
    running = true;
    var dataChild = $(this).data("child");
    $(".child *:not(#"+dataChild+")").fadeOut(500);
    $("#"+dataChild).delay(500).fadeIn(500, function(){
      running = false;
    });
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
  <div class="a" data-child="welcome">aaa</div>
  <div class="b" data-child="about">bbb</div>
  <div class="c" data-child="contact">ccc</div>
</div>
<div class="child">
  <div id="welcome">welcome</div>
  <div id="about">about</div>
  <div id="contact">contact</div>
</div>

jQuery 如果另一个是运行，则阻止动画触发

jQuery prevent animation trigger if another is running

html

javascript

jquery

fadein

jQuery 如果另一个是 运行，则阻止动画触发

jQuery prevent animation trigger if another is running

html

javascript

jquery

fadein

jQuery 如果另一个是运行，则阻止动画触发