3

我正在尝试在有限的时间内快速连续地为 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

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

4

4 回答 4

4 
$('.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--);
        });
    }
}
于 2012-08-10T19:23:16.367 回答
1

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

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);
于 2012-08-10T19:21:38.707 回答
1

我建议您决定希望效果运行多长时间，然后将操作封装到一个函数中，该函数将负责递归和停止：

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/

于 2012-08-10T19:27:28.403 回答
0

首先将选择的对象保存到 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);
于 2012-08-10T19:14:17.160 回答