カスタムドロップダウン要素を作成しました。
それが持つことができるオプションの数は、データベーステーブルに基づいています（私はまだテーブルを作成していません）。オプションの数と同様に、4つまたは5つ、あるいはそれに関しては何でもかまいません。
PHPを使用して、ドロップダウンのオプションの数を指定します。各オプションはliタグ内にあります。li兄弟は、内部にあるulタグ。
liアイテムをアニメーション化するCSSファイルがあります。しかし、それらを一度にアニメーション化する代わりに（この場合、私はアニメーション化するだけでul同じ効果が得られます）、私がやりたいのは、それらを1つずつアニメーション化することです。
それぞれliにプログレッシブな遅延があります。たとえば、最初liの0s遅延と期間がある300ms場合、2番目の遅延は最初の終了時に開始されます。つまり、2番目liの遅延は300ms同じ期間になります。持続時間は同じままですが、delay前の種類の効果を与えるように変更するだけです。
ドロップダウンのオプションの数がわからないので、どうすれば同じことができますか？計算が必要になると思いますが、CSSはサポートしていないため、ネイティブCSSを使用して計算する方法はありません。
私の最善の推測は、jQueryを使用することです。私は正しいですか？
jqueryが必要かどうかはわかりませんが、jQueryを使用してこの問題を解決する方法は知っています。これにより、基本的に、親リストに追加した後にデータベースからフェッチしたオプションリストに対して、反復ごとに300ミリ秒の遅延が追加されます。
<script type='text/javascript'>
$(document).ready(function(){
var items = ['a', 'b', 'c', 'd', 'e']; //Whatever you fetch from the database
for(var i =0; i<items.length; i++) {
var new_item = $('<p>'+items[i]+'</p>').hide();
$('#test').append(new_item); //Here test is the id of the unordered list.
new_item.delay(i*300).fadeIn(300);
}
});
</script>
そして、これをHTMLに含める必要があります-
<ul id="test">
</ul>
jQueryを含めることを忘れないでください！
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加