1つ1つずつliをフェードアップ

Question

私は各nav liを1つずつフェードしたいです。ここに私の現在のコードがあります。これはdiv全体を示していますが、少し遅れてそれぞれliを1つずつフェードインしたいと思います。

$(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; 
} 

私は一回の反復が、ノー成功に各liフェードインしようとしているループのために試してみました。アイデアを教えてください。

更新日：Rory McCrossanのコードは完璧です。残念ながら、メニューの外側をクリックするとそのメニューを非表示にするコードと互換性がありません。

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

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

何が問題になりましたか？私はちょうどJSとJQueryを学ぶようになったので、それが不十分な質問であれば私を許してください。

Answer 1

呼び出しを使用して、li要素とdelay()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>

：これを試してみてください。この例では、100msを使用しました。

Answer 2

あなたは要素の数が限られている場合は、また、CSS-アニメーションの代わりのJavaScriptのソリューションを使用して検討することもでき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>

Answer 3

でこのような何かを行います。 nth-childセレクタを使用して各要素をアドレス指定し、その位置に従ってアニメーションを遅延させることができます。アニメーションを最後に停止させるには、animation-fill-modeプロパティを使用します。

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; 
    } 
} 

この例を参照してくださいとプレフィックスに https://jsfiddle.net/97bknLdu/