延遲隊列功能僅適用於第一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()設置要調用的函數使用$.map()每個li元素;在每個li元素的animationend事件中，使用.one()在隊列中調用next函數。

當隊列是完全使用.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/