jquery - 清理简单的动画 jquery 代码

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--);
        });
    }
}