-1

我整天都在寻找这个问题的答案......我想要 4 个 divfadeTo(0)然后fadeTo(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，下一个div需要开始fadeout......有人可以帮我吗？......再一次？

4

3 回答 3

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>

这将允许从 HTML 配置设置，而无需稍后更新 JS。我还建议通过添加良好的默认值$.extend，以及一些动画选项。

于 2013-11-06T20:45:56.157 回答
0

这可能更容易

jQuery

$('.fad').each(function(i) {
    $(this).delay(i*2000).fadeTo(1000,0).fadeTo(1000,1);      
});

我在每个项目上添加了一个类，fad用一个选择器选择它们。

您需要指定持续时间，以便您可以延迟清除它。

做了一个小提琴：http: //jsfiddle.net/filever10/d8rpc/

编辑：如果您不想添加课程，也可以替换$('.fad')为。$('#red,#blue,#yellow,#green')我添加了它，以便可以将它们视为一个单元而不是 4 个单独的元素。

于 2013-11-06T20:48:47.597 回答
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 回答