jQuery предотвращает запуск анимации, если запущен другой - PullRequest
Новая
       6

jQuery предотвращает запуск анимации, если запущен другой

0 голосов
/ 02 декабря 2018

У меня есть несколько простых функций постепенного исчезновения, которые запускают постепенное исчезновение / расширение элементов div.Однако, если вы нажмете на спам кнопки, все они начнут работать и выглядят ужасно.Я хотел бы, чтобы функция запускалась только в том случае, если ни одна из них не запущена. 

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

1 Ответ

0 голосов
/ 02 декабря 2018

Вы можете сохранить состояние замирания элементов в переменной и перед проверкой состояния замирания.В этом случае я добавил 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>
...