CODEWITHSUNDEEP
jquery
Lauren Haldeman
Lauren Haldeman

Reputation: 33

clean up simple animation jquery code

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.

Upvotes: 3

Views: 404

Answers (4)

Steve Robbins
Steve Robbins

Reputation: 13812

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

Upvotes: 4

Chris Baker
Chris Baker

Reputation: 50592

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/

Upvotes: 1

Jorge
Jorge

Reputation: 18237

Start by saving into a var the object selected this give's a better performance 

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

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

Second Improve the selector. If the html related with the elements it's alway's the same, let's a div you could do this

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

Third, for what i see in your code you're trying to accomplish a bounce effect or move down and up Wrap the function in a method and do a for something like

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

Then you just called the function

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

bounce($wiggle);

Upvotes: 0

PeeHaa
PeeHaa

Reputation: 72662

Untested, but I think you have to setup a function something like the following (not sure if this does exactly what you want because it is pretty hard to tell with the "mess", but it should give you an idea):

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

Upvotes: 1

Related Questions