Эффект jQuery: используйте dequeue для завершения пользовательской функции очереди, которая позволяет очереди продолжать работу
Эффект jQuery: упражнение 4 с решением
Используйте dequeue, чтобы завершить пользовательскую функцию очереди, которая позволяет очереди продолжать движение.
Решение :
HTML-код:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Use dequeue to end a custom queue function which allows the queue to keep going</title>
<style>
div {
margin: 3px;
width: 50px;
position: absolute;
height: 50px;
left: 10px;
top: 30px;
background-color: #9F81F7;
}
div.new {
background-color: #3B0B24;
}
</style>
</head>
<body>
<button>Start</button>
<div </div>
</body>
</html>
Код JavaScript:
$( "button" ).click(function() {
$( "div" )
.animate({ left:"+=250px" }, 2000 )
.queue(function() {
$( this ).toggleClass( "new" ).dequeue();
})
.animate({ left:"-=250px" }, 2000 );
});
Примечание. В jQuery метод dequeue ([queueName]) используется для выполнения следующей функции в очереди для соответствующих элементов. У него есть следующий параметр:
- queueName: строка, содержащая имя очереди. [Type: String]
Демонстрация в реальном времени:
См. Pen jquery-effect-упражнение-4 от w3resource ( @ w3resource ) на CodePen .
Внесите свой код и комментарии через Disqus.
Предыдущий: Установите таймер для задержки выполнения следующих элементов в очереди.
Далее: постепенно исчезать и исчезать все элементы деления.
Каков уровень сложности этого упражнения?
Новый контент: Composer: менеджер зависимостей для PHP , R программирования