Действия по завершении анимации

271
20 января 2017, 06:24

Здесь следует обратить внимание на цвет абзаца, это работает так: когда блок скрыт - абзац красный, когда блок появляется - абзац чёрный. Абзац меняет цвет лишь после завершения функции slideToggle(). Но такая проблема: когда блок раскрыт, и при этом нажать на абзац 2 раза, то блок остаётся открытым, а у абзаца цвет красный, а не чёрный. Долго решал проблему уже крайний случай.

$('p').click(function() { 
  if ($('.q1').is(':hidden')) { 
    $('.q1').stop().slideToggle(function() { 
      $('p').css({ 
        background: 'black' 
      }); 
    }); 
  } else { 
    $('.q1').stop().slideToggle(function() { 
      $('p').css({ 
        background: 'red' 
      }); 
    }); 
  } 
});
.q1 { 
  height: 300px; 
  width: 100px; 
  background: black; 
  display: none; 
} 
p { 
  float: right; 
  background: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p>123312 
  <div class="q1"></div>

Answer 1

Очевидно ошибка в том, что вы используете 2 разных условия, которые определяют скрыт объект или нет.

is(':hidden') определяет скрыт ли объект полностью

slideDown() определяет скрыт ли объект или уже начал скрываться.

Но вместо того, чтобы пытаться предсказать, как поведет себя slideDown(), не легче ли сделать проверку после анимации, чтобы определить состояние уже дефакто?

Рабочий код:

$('p').click(function() { 
 
  $('.q1').stop(true).slideToggle(function() { 
 
    if ($('.q1').is(':hidden')) { 
      $('p').css({ 
        background: 'red' 
      }); 
    } else { 
      $('p').css({ 
        background: 'black' 
      }); 
    } 
  }); 
 
});
.q1 { 
  height: 300px; 
  width: 100px; 
  background: black; 
  display: none; 
} 
p { 
  float: right; 
  background: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p>123312 
  <div class="q1"></div>

READ ALSO
Сравнение значений поля ввода в каждом блоке
HTML

Сравнение значений поля ввода в каждом блоке

Здравствуйте! Есть форма с несколькими блоками в которых, в свою очередь присутствуют по два инпута from и toЕсть скрипт, который сверяет введенные...

 349
Нижняя рамка активных элементов
HTML

Нижняя рамка активных элементов

Здравствуйте, у меня при наведении на элемент в Google Chrome должна появляться рамка 3px, но сначала появляется однопиксельная, и потом достраивается...

 308
Нажатие на кнопку с помощью тачпада
HTML

Нажатие на кнопку с помощью тачпада

Есть кнопка на форме, есть два селектора: button и button:activeПри нажатии мышью на кнопке — стиль из селектора button:active применяется, но если нажать...

 324
Округление значения поля с шагом в 0.5
HTML

Округление значения поля с шагом в 0.5

Здравствуйте! Есть числовое поле с установленным минимальным и максимальным значениями и шагом в 05

 322