0

私は最近、特定のクラスの画像を順番にロードし、ページのロード時に 1 つずつフェードインする素敵な小さな jquery スクリプトを使用しました。

Jクエリ

$(function() {
$(".faded").hide()    
$(".faded").each(function(i) {
    $(this).delay(i * 100).fadeIn(500);
});
});

HTML の例

<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
.....

実際のこの例は、ここで見ることができますhttp://comill.com/animation/

これは、同様の方法で画像をロードするロールオーバーまたはホバー スクリプトを作成するのは非常に良いことだと思いました。

たとえば、上記のデモ リンクでは、緑色の円盤のみがページに表示され、ユーザーがこの円盤にカーソルを合わせると、花びらが 1 つずつフェード インします。理想的には、マウスアウト時にすべての花びらが一度にフェードアウトします。

私はこれを調査するのにしばらく時間を費やしましたが、達成するのはかなり簡単だと思いますが、これまでのところ、Google で検索しても解決策が見つからなかったので、誰かが解決策を提供できる場合は、どんな助けも大歓迎です.

4

1 に答える 1

2

.hover()緑色のディスク要素でa を使用する

あなたの例では、次のコードを試してみてください

$(document).ready(function(){
    var faded = $(".faded");
    faded.hide();
    $('#midbut').hover(function(){
        // mouseenter
        faded.each(function(i) {
            $(this).delay(i * 100).fadeIn(500);
        });
    }, function(){
        // mouseleave
        faded.fadeOut(500);
    });
});

また、ページの初期化でcssを使用してできる場合は、jqueryで要素を非表示にするべきではありません

于 2011-11-21T18:19:33.480 に答える