1

transparent.png と呼ばれる各画像を、現在のように同時にではなく、3 回連続して脈動 (またはフェードイン、フェードアウト) する必要があります。

transparent.png は各画像の上に配置され、フェードアウト効果を与えます。

私が使う：

  • jQuery 1.7.2
  • jQuery UI 1.8.21

これが私のコードです：

jQuery('.transparent').each(function(index) {
    jQuery(this).effect("pulsate", {times:3}, 1000);
});

<div id="content">
    <a class="frontimage projectleft" href="?folder=/sculptures">
        <img width="200" title="" alt="" src="0054_46.jpg">
        <img width="200" title="" alt="" src="transparent.png" class="transparent" style="opacity: 1; display: block;">
    </a>
    <a class="frontimage projectleft" href="?folder=/furniture">
        <img width="200" title="" alt="" src="0076_20.jpg">
        <img width="200" title="" alt="" src="transparent.png" class="transparent" style="opacity: 1;">
    </a>
    <a class="frontimage projectright" href="?folder=/paintings">
        <img width="200" title="" alt="" src="156_52.jpg">
        <img width="200" title="" alt="" src="transparent.png" class="transparent" style="opacity: 1;">
    </a>
    <a class="frontimage projectleft" href="?folder=/sculptures">
        <img width="200" title="" alt="" src="174_36.jpg">
        <img width="200" title="" alt="" src="transparent.png" class="transparent" style="opacity: 1;">
    </a>
    <a class="frontimage projectleft" href="?folder=/furniture">
        <img width="200" title="" alt="" src="276_1.jpg">
        <img width="200" title="" alt="" src="transparent.png" class="transparent" style="opacity: 1;">
    </a>
    <a class="frontimage projectright" href="?folder=/paintings">
        <img width="200" title="" alt="" src="290_200076-01.jpg">
        <img width="200" title="" alt="" src="transparent.png" class="transparent" style="opacity: 1;">
    </a>
</div>
4

2 に答える 2

1

通常のアプローチはeffect()、現在の呼び出しに提供するコールバックで次の呼び出しをチェーンすることです。

これを実現するには、一連の要素とアニメーション化する要素のインデックスを受け取る関数を作成することをお勧めします。

function pulsate(elements, index)
{
    if (index < elements.length) {
        elements.eq(index).effect("pulsate", {
            times: 3
        }, 1000, function() {
            pulsate(elements, ++index);
        });
    }
}

次に、以下を発行してシーケンスを開始します。

pulsate(jQuery(".transparent"), 0);
于 2012-06-20T10:23:57.873 に答える
1

私はこれをテストしていませんが、プリンシパルは健全です。

pulsate(jQuery('.transparent').first());    // Call this to pulsate each image sequentially

function pulsate(element)
{
    jQuery(element).effect("pulsate", {times:3}, 1000, function ()
    {
        var _next = $(element).parent().next();
        if (_next.length != 0)
            pulsate(_next.find('.transparent'));
    });
}

基本的に、エフェクト関数でコールバックを使用して、一連の脈動の次の要素を設定しています。

于 2012-06-20T10:24:10.840 に答える