在每一里逐漸消失

[英]Fade in each li one by one


I want to fade each nav li one by one. Here's my current code. It shows the whole div, now I want to fade in each li one by one with a slight delay.

我想把每一輛nav li逐個淡入。這是我當前的代碼。它顯示了整個div,現在我想要一個一個地淡入,稍微延遲一點。

$(document).ready(function(){
    $("#circleMenuBtn").click(function(){
        $("#dropDownMenu").fadeIn(500);
    });
});
<div class="sub-menu" id="dropDownMenu">
    <ul id="navbar">
        <li> First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>Fifth</li>
    </ul>
</div>
.sub-menu {
    position: absolute;
    z-index: 1000;
    color: #fff;
    right: 5px;
    display: none;
}

I tried for loops trying to fade in each li in one iteration but no success. Please share your ideas.

我嘗試尋找循環,試圖在一次迭代中使每個li消失,但沒有成功。請分享你的想法。

UPDATE: Rory McCrossan's code is perfect. Unfortunately, it's not compatible with my code that hides the menu when clicked outside it.

更新:Rory McCrossan的代碼是完美的。不幸的是,它與我的代碼不兼容,我的代碼在單擊菜單之外時隱藏菜單。

$(document).mouseup(function (e) {
    var container = $("#dropDownMenu");

    if (!container.is(e.target)
       && container.has(e.target).length === 0) {
       container.fadeOut(500);
    }
});

What went wrong? I've just started to learn JS and JQuery so please forgive me if it's a lame question.

到底是哪里出了錯?我剛剛開始學習JS和JQuery,如果這是一個蹩腳的問題,請見諒。

3 个解决方案

#1


38  

You can use an each() call to loop through the li elements and delay() the fadeIn() animation by an incremental amount. Try this:

您可以使用each()調用對li元素進行循環,並以增量的方式對fadeIn()動畫進行delay()。試試這個:

$("#dropDownMenu li").each(function(i) {
    $(this).delay(100 * i).fadeIn(500);
});
.sub-menu {
    position: absolute;
    z-index: 1000;
    /* color: #fff;
    right: 5px; */
}

.sub-menu li {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu" id="dropDownMenu">
    <ul id="navbar">
        <li> First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>Fifth</li>
    </ul>
</div>

If you want to increase/decrease the interval between items fading, change the value provided to the delay() method. In this example I used 100ms.

如果您想增加/減少項之間的時間間隔,請更改delay()方法提供的值。在這個例子中,我使用了100ms。

#2


12  

If you have a limited number of elements you could also consider using css-animations instead of a javascript solution. You can address each element using the nth-child selector and delay its animation according to its position. To make the animation stop at the end use the animation-fill-mode property.

如果您有數量有限的元素,您也可以考慮使用css動畫而不是javascript解決方案。您可以使用第n個子選擇器處理每個元素,並根據其位置延遲其動畫。要使動畫在最后停止,請使用動畫-填充模式屬性。

li {
  opacity: 0;
  animation: fadeIn 0.9s 1;
  animation-fill-mode: forwards;
}

li:nth-child(5n+1) {
  animation-delay: 0.5s;
}

/*...*/

@keyframes fadeIn {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

See this example and mind the prefixes https://jsfiddle.net/97bknLdu/

查看此示例並注意前綴https://jsfiddle.net/97bknLdu/。

#3


10  

Do something like this with animation success callback

用動畫成功回調做類似的事情

$(document).ready(function() {
  function fade(ele) {
    ele.fadeIn(500, function() { // set fade animation fothe emlement
      var nxt = ele.next(); // get sibling next to current eleemnt
      if (nxt.length) // if element exist
        fade(nxt); // call the function for the next element
    });
  }
  $("#circleMenuBtn").click(function() {
    fade($('#navbar li').eq(0)); // call the function with first element
  });
});
.sub-menu {
  left: 0;
  top: 0;
  position: relative;
  z-index: 1000;
  color: #000;
  right: 5px;
}
ul li {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sub-menu" id="dropDownMenu">
  <ul id="navbar">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
  </ul>
</div>
<button id="circleMenuBtn">click</button>


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/05/09/72f6e72b738ac290a04dd8ba7902515b.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com