08.02.2017, 19:41
|
|
Аспирант
|
|
Регистрация: 18.01.2017
Сообщений: 40
|
|
|
Поведение метода stop()
Есть блок и скрытый абзац. При щелчке по блоку абзац анимационно появляется. У анимации отображения есть метод stop со значениями 0,0(false, false). Но так же есть Условные операторы: if который не выполняется первый раз. В его теле тоже есть stop но, со значениями 1,1(true, true). Вопрос: почему даже если if не выполняется stop ведёт себя будто у него значение 1,1 ?
$(document).ready(function(){
$('.q1').click(function(){
if($(this).next().is(':visible')) // Это не выполняется т.к. Абзац ещё не виден
$(this).next().stop(true,true).slideUp(); // Это не выполняется т.к. Абзац ещё не виден
$(this).next().stop(0,0).slideToggle();//Так почему у stop ведёт себя будто у него значение true,true ?
});
});
<div class="q1"></div>
<p></p>
|
|
08.02.2017, 20:06
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Метод .stop() останавливает выполнение текущей анимации, а вы что пытаетесь? |
|
08.02.2017, 20:19
|
|
Аспирант
|
|
Регистрация: 18.01.2017
Сообщений: 40
|
|
Я знаю что делает этот метод. В вопросе собственно вопрос написан  |
|
08.02.2017, 21:48
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Aqua77
|
|
Я знаю что делает этот метод.
|
Точно?
.stop(true,true) - актуально, если у объекта есть в очереди анимация, иначе не важно.
Следующий метод просто удаляет из очереди первую анимацию, не важно что там при этом, без параметров метод или 0,0
<html>
<head>
<style>
.foo {
position: absolute;
top: 10px;
width: 30px;
height: 30px;
background: #000;
}
#b1 {
left: 10px;
}
#b2 {
left: 50px;
}
#b3 {
left: 90px;
}
#b4 {
left: 130px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function() {
//#1
$('#b1').slideUp()
.slideToggle();
//#2
$('#b2').slideUp()
.slideToggle()
.stop();
//#3
$('#b3').slideUp()
.slideToggle()
.stop(0,0);
//#4
$('#b4').slideUp()
.slideToggle()
.stop(1,1);
});
</script>
</head>
<body>
<div class="foo" id="b1"></div>
<div class="foo" id="b2"></div>
<div class="foo" id="b3"></div>
<div class="foo" id="b4"></div>
</body>
</html>
Есть разница между #2 и #3, и между #3 и #4? А чтобы понятней стало добавьте в #4 еще одну очередь.
|
|
09.02.2017, 12:53
|
|
Аспирант
|
|
Регистрация: 18.01.2017
Сообщений: 40
|
|
Последний нюанс. Просто почему stop работает как 0,0 если при двойном щелчке когда происходит значение в if и у stop там указан 1,1 ? https://jsfiddle.net/cpdg5kza/ |
|
09.02.2017, 13:01
|
|
Аспирант
|
|
Регистрация: 18.01.2017
Сообщений: 40
|
|
Всё понял. stop в теле if не срабатывает потому что, очереди уже нет из-за ранее сработавшим span с 0,0. Если так подтвердите  |
|
09.02.2017, 15:48
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Вы можете пояснить нахрена вам метод с параметрами 0, 0, если это просто метод без параметров? А по условию будет выполняться только строка 05, никоим образом не распространяясь на строку 07. Что вы хотите получить от этого?
Не метод виноват а логика ваша, я ее лично не понимаю.
Последний раз редактировалось laimas, 09.02.2017 в 16:40.
|
|
10.02.2017, 01:30
|
|
Аспирант
|
|
Регистрация: 18.01.2017
Сообщений: 40
|
|
Сообщение от laimas
|
|
Не метод виноват а логика ваша, я ее лично не понимаю.
|
Вот как я вижу шаги программы:
Первое нажатие. if($('.q1').next().is(':visible')) не выполняется, а выполняется строка 8- $(this).next().stop(0,0).slideToggle() и блок начинает появляться.
Второе нажатие. Выполняется строка 3 $('.q1').next().stop(0,0) и происходит остановка анимации появления, и так как блок виден выполняется тело if($('.q1').next().is(':visible')) и блок начинает закрываться (а .stop(1,1) игнорируеться так как уже сработал $('.q1').next().stop(0,0) ).
https://jsfiddle.net/cpdg5kza/
Последний раз редактировалось Aqua77, 10.02.2017 в 01:34.
|
|
10.02.2017, 04:56
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Aqua77
|
|
Вот как я вижу шаги программы
|
Все что вы видите забыть и прочитать хорошо о .slideToggle(), которому не нужно .is(':visible'), он сам проверяет, и этого метода одного хватит без прочего. |
|
10.02.2017, 09:47
|
|
Аспирант
|
|
Регистрация: 18.01.2017
Сообщений: 40
|
|
|
Сообщение от laimas
|
|
Все что вы видите забыть и прочитать хорошо о .slideToggle(), которому не нужно .is(':visible'), он сам проверяет, и этого метода одного хватит без прочего.
|
Просто это один из фрагмента большого кода, и там необходим .is(':visible') - без него ни как. Я делаю аккордеон где много скрытых блоков, взаимодействия с одним просты - он открывается посредством slideToggle, но если нажать на другой блок то если кто-то открыт то его надо закрыть средством проверки .is(':visible') и slideUp  https://jsfiddle.net/b3yLckrn/1/ |
|
|
|
