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

314

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>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

391

HTML

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

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

353

HTML

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

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

370

HTML

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

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

364