延迟队列功能仅在第一次迭代时有效 [英] Delay queue function works only on first iteration
问题描述
我有以下代码段:
$('.mobileBox').on('click', function() {
$(this).toggleClass('expand');
$(".mobile_nav").toggleClass('displayMobileNav');
$(this).find('i').toggleClass('fa-ellipsis-h fa-times');
//delay animations for 1 second in order to let width expand until the end
$(this).delay(1000).queue(function() {
$(".mobile_nav li").each(function (i) {
$(this).attr("style", "-webkit-animation-delay:" + i * 200 + "ms;"
+ "-moz-animation-delay:" + i * 200 + "ms;"
+ "-o-animation-delay:" + i * 200 + "ms;"
+ "animation-delay:" + i * 200 + "ms;");
if (i == $(".mobile_nav li").size() -1) {
$(".mobile_nav").addClass("play");
}
});
});
});
请参阅此小提琴
我如何重设延迟队列,因为它只能在第一次使用?
How can I reset delay queue as it only works for the first time?
推荐答案
您可以设置延迟和队列的名称,使用transitionend
事件,在.expand
元素上使用.one()
调用.queue()
来设置使用$.map()
调用每个li
元素的函数;在每个li
元素的animationend
事件中,使用.one()
在队列中调用next
函数.
You can set a name for the delay and queue, use transitionend
event, .one()
at .expand
element to call .queue()
to set a function to call for each li
element using $.map()
; at animationend
event of each li
element, call next
function in queue using .one()
.
队列完成后,使用.promise()
,.then()
,删除style
属性或设置包含animation
属性的style
属性,将元素的值设置为空字符串.
When queue is complete use .promise()
, .then()
, remove style
attribute or set style
attribute containing animation
properties, values to empty string at the elements.
$(".mobile_navigation").addClass("mobileBox");
var li = $(".mobile_nav li");
var mobileBox = $(".mobileBox");
var mobileNav = $(".mobile_nav");
mobileBox.on('click', function() {
// remove `style` attribute at `li` elements
li.removeAttr("style");
$(this).toggleClass('expand');
mobileNav.toggleClass('displayMobileNav');
$(this).find('i').toggleClass('fa-ellipsis-h fa-times');
});
mobileBox.parent()
.on("transitionend", ".expand", function(event) {
// do stuff at `transitionend` event of `.expand`,
// queue a function for each `.mobile_nav li` element;
// at `animationend` event of each `li` element
// call next function in "transition" queue
mobileBox
.queue("transition", $.map(li, function(el) {
return function(next) {
$(el).attr("style",
`-webkit-animation-delay:200ms;
-moz-animation-delay:200ms;
-o-animation-delay:200ms;
animation-delay:200ms;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;`)
.one("animationend", next)
}
}))
.dequeue("transition")
.promise("transition")
.then(function() {
// remove `style` attribute at `li` elements
li.removeAttr("style")
})
})
.mobileBox {
position: fixed;
top: 0px;
left: 0px;
border-radius: 0px;
width: 60px;
height: 60px;
background-color: rgb(52, 152, 219);
z-index: 1;
transition: width 1s;
}
.actionButton {
position: fixed;
top: 0px;
left: 0px;
width: 60px;
height: 60px;
padding: 10px;
padding-top: 15px;
text-align: center;
}
.mobileBox:hover,
:focus {
background-color: rgba(51, 51, 51, 0.9);
}
.mobileBox.expand {
width: 320px;
}
.mobile_nav {
margin-top: 60px;
list-style-type: none;
width: 0px;
padding-left: 0px;
display: none;
}
.mobile_nav.displayMobileNav {
display: block;
width: 320px;
}
.mobile_nav li {
background-color: rgba(52, 152, 219, 0.9);
padding: 0.6em;
color: white;
}
.mobile_nav a {
color: white;
}
.mobile_nav li:hover {
background-color: rgb(52, 152, 219);
}
.mobile_nav li {
opacity: 0;
position: relative;
-webkit-animation: fadeIn 600ms ease both;
-webkit-animation-play-state: paused;
-moz-animation: fadeIn 600ms ease both;
-moz-animation-play-state: paused;
-o-animation: fadeIn 600ms ease both;
-o-animation-play-state: paused;
animation: fadeIn 600ms ease both;
animation-play-state: paused;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="mobile_navigation">
<div class="actionButton">
<i class="fa fa-ellipsis-h fa-2x first"></i>
</div>
<ul class="mobile_nav">
<li class=""><a href="http://www.w3schools.com/css/css_list.asp">About Me</a>
</li>
<li class=""><a href="http://www.w3schools.com/css/css_list.asp">Portfolio</a>
</li>
<li class=""><a href="http://www.w3schools.com/css/css_list.asp">References</a>
</li>
<li class=""><a href="http://www.w3schools.com/css/css_list.asp">Say hello!</a>
</li>
</ul>
</div>
jsfiddle https://jsfiddle.net/kx27vt6n/4/
jsfiddle https://jsfiddle.net/kx27vt6n/4/
这篇关于延迟队列功能仅在第一次迭代时有效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!