Delay queue function works only on first iteration

问题

I have following chunk of code:

$('.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");
                    }
                });
            });
        });

Please refer to this Fiddle

How can I reset delay queue as it only works for the first time?

回答1:

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().

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/

来源：https://stackoverflow.com/questions/39521346/delay-queue-function-works-only-on-first-iteration