Question

我正在制作一个循环动画，你可以在这里看到：http://bit.ly/blinkingEyes

我有2套动画功能，一套让眼睛眨眼，另一套让它们发光，两者都能独立工作，但在一起工作时，发光效果会中断闪烁效果。

我读到了有关自定义队列的信息，我相信这就是答案，但如果不让我的浏览器冻结，我就无法工作。

你能帮我理解吗？

更新：我正在使用jQuery 1.6

这是我的jQuery文件：

      jQuery.fx.interval = 24;

    $(function(){

        /* -----------------------  #eyes1: blinking and glowing  ------------------*/
        /* ----------------------------- (glowing is defined below) ---------------*/

        $('#eyes1 .eye_set1').blink({
                                    frameStop: 5,
                                    endDelay: 4000,
                                    frameHeight: 40,
                                    frameDelay: 100,
                                    framePos: 0
                                    });

        $('#eyes1 .eye_set2').blink({
                                    frameStop: 3,
                                    endDelay: 4000,
                                    frameHeight: 40,
                                    frameDelay: 100,
                                    framePos: 0
                                    });

        $('#eyes1 .eye_set3').blink({
                                    frameStop: 10,
                                    endDelay: 5000,
                                    frameHeight: 30,
                                    frameDelay: 120,
                                    framePos: 0
                                    });

        /* -----------------------  #eyes2: only blinking   ------------------ */

        $('#eyes2 .eye_set1').blink({
                                    frameStop: 5,
                                    endDelay: 4000,
                                    frameHeight: 40,
                                    frameDelay: 100,
                                    framePos: 0
                                    });

        $('#eyes2 .eye_set2').blink({
                                    frameStop: 3,
                                    endDelay: 4000,
                                    frameHeight: 40,
                                    frameDelay: 100,
                                    framePos: 0
                                    });

        $('#eyes2 .eye_set3').blink({
                                    frameStop: 10,
                                    endDelay: 5000,
                                    frameHeight: 30,
                                    frameDelay: 120,
                                    framePos: 0
                                    });


/* ---- make each child of #eyes1 to glow ------ */

var d = 250;
    $('#eyes1').children().each(function(){
            var thisDelay = Math.floor(Math.random()*1160)
            $(this).delay(thisDelay).animateLoop({
                                params_A: {opacity: 0.6},
                                params_B: {opacity: 1},
                                       duration_A: 800,
                                       duration_B: 800
                                 });
        })

    })




/* ---- animateLoop: make the glowing effect ------ */

    $.fn.animateLoop = function(options) {
        var defaults = {
            params_A: {opacity: 0.6},
            params_B: {opacity: 1},
            duration_A: 800,
            duration_B: 800
        }
        var options = $.extend(defaults, options)

        var $this = this

        function animateLoopSet() {
                $this.animate(options.params_A, {duration:options.duration_A, easing:"easeInOutSine"})
                     .animate(options.params_B, {duration:options.duration_B, easing:"easeInOutSine", complete: function(){animateLoopSet()} })
        }

        animateLoopSet()
        return this
    }



/* ---- animateLoop: make the blinking effect ------ */

    $.fn.blink = function(options) {

        var defaults = {
            frameStop: 5,
            endDelay: 4000,
            frameHeight: 40,
            frameDelay: 100,
            framePos: 0
        }

        var options = $.extend(defaults, options)

        return this.each(function(){
        var $this = $(this)
        var countBlink = 0;

        function blinkSet() {
            if(countBlink <= options.frameStop) {
            countBlink++
            $this.queue(function(next){
                                $this.delay(options.frameDelay)
                                blinkFrame();
                                next();
                            })
            .queue(function(next){
                blinkSet()
                next();
                })
            } else {
                countBlink = 0;
                $this.queue(function(next){
                    $this.delay(options.endDelay)
                    blinkSet()
                    next();
                })
            }
        }

        function blinkFrame(backword){
            options.framePos -= options.frameHeight
            $this.css({backgroundPosition: '0 ' + options.framePos + 'px'})
            }

        blinkSet()
        })
    }

Answer 1

Jquery 1.6已更新为同步动画并提供更流畅的动画，它应该可以帮到你。

来自jquery博客......

<强>效果

同步动画

在jQuery中，您可以同时运行多个动画（即使在同一元素上有多个动画，也可以为不同的属性设置动画）。在1.6中，我们引入了一种增强功能，可确保所有动画同步到相同的计时器间隔。这可能会产生问题，因为动画可能会略微不同步（甚至几毫秒），导致稍微“关闭”动画。

更流畅的动画

此外，jQuery现在使用浏览器提供的新requestAnimationFrame方法，使我们的动画更加流畅。我们可以使用此功能来避免调用计时器，而是依赖浏览器来提供最佳的动画体验。 .promise（）

就像之前的$ .ajax（）一样，$ .animate（）得到“延迟”。 jQuery对象现在可以返回一个Promise来观察集合上的所有动画何时完成：

如何让多个动画同时运行？

1 个答案: