функция очереди задержки работает только на первом iterration

Question

я следующий кусок кода

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

Пожалуйста, обратитесь к этому Fiddle

Как сбросить очередь задержки, как она работает только в первый раз?

Answer 1

Вы можете установить имя для задержки и очереди, используйте transitionend событие, .one() на .expand элемент для вызова .queue() установить функцию для вызова для каждого li элемента с помощью $.map(); at animationend событие каждого li элемент, вызов next функция в очереди с использованием .one().

Когда очередь полное использование .promise(), .then(), удалить style атрибут или набор, содержащий атрибут styleanimation свойства, значение пустой строки на элементах.

$(".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/