-1

私はこの質問に対する答えを一日中探していました... 4 つの div が必要fadeTo(0)で、次にfadeTo(1)1 つずつ。jqueryの学習を始めたばかりなので、これを行うために複雑な方法をすべて使用したくありません。これは私のコードです:

for(var i=0;i<11;i++)
            {
                $(function () { $("#red").fadeTo("medium", 0); $("#red").fadeTo("medium", 1); })
                $(function () { $("#blue").fadeTo("medium", 0); $("#blue").fadeTo("medium", 1); })
                $(function () { $("#yellow").fadeTo("medium", 0); $("#yellow").fadeTo("medium", 1); })
                $(function () { $("#green").fadeTo("medium", 0); $("#green").fadeTo("medium", 1); })
            }})

誰かが私を助けることができますか？

私を助けてくれてありがとう！しかし、私は別のことが必要だと思いました...これを行うには4つの div#redがfadeout必要fadesinです:divfadeout

4

3 に答える 3

0

クールな jQuery 遅延機能を使用できますhttp://api.jquery.com/category/deferred-object/実際の 例: http://jsfiddle.net/7e4rk/

function blink(what) {
    return function() {
        var dfd = $.Deferred(); //deferred object
        what = $("#" + what); //div we need to blink
        what.fadeOut("slow", function(){
            what.fadeIn("slow", function(){dfd.resolve()})
        });

        return dfd.promise(); //promise for chaining
    }
};

blink("red")().then(blink("blue")).then(blink("yellow")).then(blink("green"))
于 2013-11-06T21:00:22.293 に答える
0

#redフェード、続いて#blue、続いて#yellow、その後に が続くキュー方式でアニメーションを発生させたいと仮定すると#green、jQuery のqueue機能を利用することをお勧めします。

jQuery(function ($) {
    $(window).queue(function (n) {
        $('#red').fadeTo('medium', 0).fadeTo('medium', 1, n);
    }).queue(function (n) {
        $('#blue').fadeTo('medium', 0).fadeTo('medium', 1, n);
    }).queue(function (n) {
        $('#yellow').fadeTo('medium', 0).fadeTo('medium', 1, n);
    }).queue(function (n) {
        $('#green').fadeTo('medium', 0).fadeTo('medium', 1, n);
    });
});

実際のプロジェクトでは、次のようなものを使用する傾向があります。

jQuery(function ($) {
    $('[data-fader]').each(function () {
        var $this,
            data;
        $this = $(this);
        data = $this.data('fader');
        $(window).queue(function (n) {
            $this.fadeTo(data.outDuration, 0).fadeTo(data.inDuration, 1, n);
        });
    });
});

次のようなコードと一緒に行くでしょう：

<div data-fader='{"outDuration": 400,"inDuration": 400}'>lorem ipsum...</div>
<div data-fader='{"outDuration": 400,"inDuration": 400}'>...</div>
<div data-fader='{"outDuration": 400,"inDuration": 400}'>...</div>
<div data-fader='{"outDuration": 400,"inDuration": 400}'>...</div>

これにより、後で JS を更新する必要なく、HTML から設定を構成できます。を介して適切なデフォルトを追加$.extendし、アニメーションにいくつかのオプションを追加することもお勧めします。

于 2013-11-06T20:45:56.157 に答える