Question

I am trying to animate a div up and down, in quick succession, for a limited time. This works in jquery to make it happen, but it is so messy:

 $('.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

I know it is bad. I’d like to create a unique function to make this happen, but I am lost as to where to start.

Answer 1

I suggest you decide how long overall you want the effect to run, then encapsulate the actions into a single function that will take care of recursing and stopping:

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

Try it here: http://jsfiddle.net/P4H9c/1/