Question

我试图在有限的时间内快速连续地为一个div上下动画。这在jquery中起作用以实现它，但它太乱了：

 $('.wiggle').delay(1800).show(50).animate({
                top: '15'
                              }, 40, function() {
                                 $('.wiggle').animate({
                                 top: '12'
                                 }, 40, function() {
                                    $('.wiggle').animate({
                                    top: '15'
                                    }, 40, function() {
                                        $('.wiggle').animate({
                                        top: '12'
                                        }, 40, function() {
                                            $('.wiggle').animate({
                                            top: '15'
                                            }, 40, function() {
                                                $('.wiggle').animate({
                                                top: '12'
                                                }, 40, function() {
                                                    $('.wiggle').animate({
                                                    top: '15'
                                                    }, 40, function() {
                                                        $('.wiggle').animate({
                                                        top: '12'
                                                        }, 40, function() {
                                                            $('.wiggle').animate({
                                                            top: '15'
                                                            }, 40, function() {
                                                                $('.wiggle').animate({
                                                                top: '12'
                                                                }, 40, function() {
                                                                    $('.wiggle').animate({
                                                                    top: '14'
                                                                    }, 40, function() {
                                                                        $('.wiggle').hide(50)
                                                                     });
                                                                 });
                                                             });
                                                         });
                                                     });
                                                 });
                                             });
                                         });
                                     });
                                 });
                             }); //end wiggle

我知道这很糟糕。我想创建一个独特的功能来实现这一点，但我迷失了从哪里开始。

Answer 1

$('.wiggle').delay(1800).show(50).wiggle(12);

$.fn.wiggle = function(i) {

    var $elem = $(this);

    if (i > 0) {

        $elem.animate({
            top: i % 2 == 0 ? 15 : 12
        }, 40, function() {

            $elem.wiggle(i--);
        });
    }
}

Answer 2

未经测试，但我认为您必须设置类似以下的功能（不确定这是否完全符合您的要求，因为很难说“混乱”，但它应该给您一个想法）：

function doWiggle($elem, numberOfTimesToWiggle)
{
    $elem.animate({
        top: '15'
    }, 40, function() {
        top: '12'
    }, 40, function() {
        doWiggle($elem, (numberOfTimesToWiggle-1));
    });

}

setTimeout(function() {
    show(5);
    doWiggle($('.wiggle'), 20);
},1000);

Answer 3

我建议您决定要运行效果的总体长度，然后将操作封装到一个将负责递归和停止的单个函数中：

function wiggle(selector, duration_of_wiggle) {
    var wiggle_active = true;
    var target = $(selector);
    setTimeout(function () {
        wiggle_active = false;
        target.hide();
    }, duration_of_wiggle);
    var one_wiggle_down = function () {
        if (!wiggle_active)
            return;
        target.animate({
            top: '15'
        }, 40, one_wiggle_up);
    };    
    var one_wiggle_up = function () {
        if (!wiggle_active)
            return;
        target.animate({
            top: '12'
        }, 40, one_wiggle_down);
    };
    one_wiggle_down();
};

wiggle('.wiggle', 1000);

在此处试试：http://jsfiddle.net/P4H9c/1/

Answer 4

首先将选中的对象保存到var中，这样可以获得更好的性能

var $wiggle = $('.wiggle');

$wiggle.delay(1800).show(50).animate({
            top: '15'
                          }, 40, function() {
                             $wiggle.animate({ //and so on..

第二次改进选择器。如果与元素相关的html总是相同的那么，让我们div你可以做到这一点

var $wiggle = $('div.wiggle')

第三，对于我在你的代码中看到的，你试图完成一个反弹效果或向下移动并在一个方法中包装该函数并执行类似

的操作

function bounce(wiggle) {
    for (i = 1; i < 5; i++) {
        if (i % 2 == 0) {
        wiggle.animate({
            top: '12px'
        }, 75);
    }
    else if (i % 3 == 0) {
        paquete.animate({
            top: '15px'
        }, 75);
    }
    }
  wiggle.hide();
}

然后你刚刚调用了函数

var $wiggle = $('.wiggle');

bounce($wiggle);

清理简单的动画jquery代码

4 个答案: