1

(やあみんな) 私は、<li>要素が次々とフェードインおよびフェードアウトするシナリオを作成しようとしています。これで作業を開始できます。

<li>また、現在アニメーション化されている要素にカーソルを合わせると、アニメーションプロセスを停止しようとしています-これも機能します。

ただし<li>、display:none に設定された要素を表示するのに問題があります。代わりに、アニメーションが循環するのを待つ必要があります。

これが私の現在の HTML マークアップです。

<div id="content">
    <li class="one">one</li>
    <li class="two">two</li>
    <li class="three">three</li>
</div>

<li>ただし、jQuery によって非表示にならない内に要素をネストできれば、<li>マウスを上に置いたときに要素を display:block に戻すことができると考えました<div>。

推奨されるマークアップ;

<div id="content">
    <div class="wrap"><li class="one">one</li></div>
    <div class="wrap"><li class="two">two</li></div>
    <div class="wrap"><li class="three">three</li></div>
</div>

ただし、以下に貼り付けた jQuery では、<li>要素がネストされている場合ではなく、#content の兄弟である場合にのみ要素を処理することがわかります。

jQuery(document).ready(function($) {
    $('#content li').hide();
    InOut($('#content li:first'));

    function InOut(elem) {
        elem.delay().fadeIn(1500).delay(5000).fadeOut(1500, function() {
            if (elem.next().length > 0) {
                InOut($(this).next());
            }
            else {
                InOut($(this).siblings(':first'));
            }

        });
    }

    $('#content li').mouseover(function() {
        $(this).fadeIn(500).stop(true, true);
    });
    $('#content li').mouseout(function() {
        if ($(this).is(":visible") == true) {
            InOut($(this));
        }
    });

});

例として、現在のアニメーションの Fiddle を以下の順序で作成しました。

http://jsfiddle.net/pusher/TuGES/1/

どんな助けでも大歓迎です。

ありがとうございました！

4

2 に答える 2

1

非表示の要素でのマウスオーバーを許可するにfadeOut()は、アイテムを display: none のままにしてマウスイベントを受信しないため、使用しないでください。代わりに、不透明度を 0 のままにしておく必要があります。つまり、 を使用する必要がありますfadeTo()。コードの修正バージョンを次に示します (テストのために時間間隔を短縮しています)。

以下の動作になるように修正しました。

  • フェードアウトしている項目にマウスを合わせると、完全に表示されるように戻り、すべてのアニメーションが停止します。
  • フェードインしているアイテムにマウスオーバーすると、完全に表示され、すべてのアニメーションが停止します。
  • 表示されていたアイテムにマウスオーバーすると、そのアイテムが表示状態として保持され、アニメーションは開始されません。
  • アイテムをマウスアウトすると、アニメーションが開始されます。
  • 非表示のアイテムにマウスを合わせると、そのアイテムがすぐに表示され、他のアイテムはすべて非表示になります。

修正の鍵の 1 つは、すべてのアニメーションと.hide()他のすべての要素 (アニメーション化されている可能性があります)を停止する.fadeOut()ことでした。すべての要素を非表示にした後、現在の要素を表示し、不透明度を 1 に設定して完全に表示される状態にします。

jQuery(document).ready(function($) {
    $('#content li').css("opacity", 0);
    InOut($('#content li:first'));

    function InOut(elem) {
        elem.delay().fadeTo(1500, 1).delay(1000).fadeTo(1500, 0, function() {
            if (elem.next().length > 0) {
                InOut($(this).next());
            }
            else {
                InOut($(this).siblings(':first'));
            }

        });
    }

    $('#content li').mouseover(function() {
        $(this).siblings().add(this).stop(true, false).css("opacity", 0);
        $(this).show().css("opacity", 1);
    });
    $('#content li').mouseout(function() {
        if ($(this).is(":visible") == true) {
            InOut($(this));
        }
    });
});​

そして、ここに動作するデモがあります: http://jsfiddle.net/jfriend00/k4ASz/

PSページ内のすべてのアイテムで常にレイアウトが少し異なるため、CSSも少し更新する必要がありました。

于 2012-04-06T00:32:25.873 に答える
1

表示を「なし」に設定すると、要素は実際にはコード外からアクセスできなくなります。プログラムでコンテンツを変更することは素晴らしいことですが、ユーザーのクリッカブルにはあま​​り適していません。代わりに、visiblity:hidden を使用することをお勧めします。

于 2012-04-05T23:41:11.003 に答える