如何停止和重置对象中的几个动画元素？ （几个单独的动画）

Question

I have created a few animations and each of them should be a separate slide on the main site slider.
Thats why, I've got from my boss an object structure (code below) and he said I should use it to those animations.

var RDAnimation = function(o){
var f = $.extend({
    start: function() {
        return true;
    },
    pause: function() {
        return true;
    },
    reset: function() {
        return true;
    },
    stop: function() {
        if (this.pause()) {
            return this.reset();
        }
    },
    vars: {}
},o);
this.start = f.start;
this.pause = f.pause;
this.reset = f.reset;
this.stop = f.stop;
this.vars=f.vars;
};

But because I don't have a much of experience with working on objects, I just paste all of the animating function into 'start', just to see what will happen (code below).

var anim3=new RDAnimation({

    start: function() {
        var $this = this;

function bars() {
var barHeight = 0;

$('.chart-bar').each(function () {

    barHeight = Math.floor(Math.random() * 100);

    $(this).delay(1000).animate({
        'height': barHeight + '%',
        'min-height': '20px'},
        700, function(){

            bars();   
     });

});

}

var count = 0;

function badgeClone() {

var badge1 = $('.badge');
var badge2 = $('.badge').clone();

var badgeWidth = badge1.width();
var badgeHeight = badge1.height();

    //badge1.text(count);

    badge1.after(badge2);
    badge2.css({
        'line-height': '180px',
        'text-align': 'center',
        'font-size': '70px',
        'font-weight': 'bold',
        'color': '#fff',
        'opacity':'0'
    });

    badge2.animate({
        'width': badgeWidth * 2 + 'px',
        'height': badgeHeight *2 + 'px',
        'line-height': '360px',
        'font-size': '140px',
        'top': '-150px',
        'right': '-100px'
        },
        100, "linear", function() {


            if(count >= 9) {
                count = 1
            } else {
                count++
            }

            badge2.text(count);


            badge2.delay(300).animate({
                'width': badgeWidth + 'px',
                'height': badgeHeight + 'px',
                'line-height': '180px',
                'font-size': '70px',
                'top': '-60px',
                'right': '-40px',
                'opacity': '1'},
                100, "linear", function(){
                    badge1.fadeOut(600, function(){
                        $(this).remove();
                    });
                });
        });  

}

bars();

var chartbars = $('.chart-bar');

$(chartbars).each(function(i) {

    chartbar = chartbars[i];

    var leftPos = i * 24 + 4;

    $(chartbar).css({'left': leftPos + 'px'});

});

// ppl animations

var height = $('.person').height();    

$('.person').css({'top': -height + 'px'});

var female = function(){
    $('.female').fadeIn(300).animate({'top': '0px'}, 2500, function(){

        male();

        badgeClone();

        $(this).delay(1000).fadeOut(500, function() {
            $(this).css({'top': -height + 'px'});
        });

    });
};

var male = function(){

    $('.male').fadeIn(300).animate({'top': '0px'},2500,function(){
        badgeClone();

        female();

            $(this).delay(1000).fadeOut(500, function() {
            $(this).css({'top': -height + 'px'});
        });
    });
};

male();

   },
   pause: function() {
       var $this = this; 

       $('.chart-bar').stop();


   },
   reset: function() {
        var $this = this;

    $this.count = 0;

   },
    vars: {


   }
});

And it's working! Animation will start when I run anim3.start . But now.. How can I stop it? Because I have to stop it when user chose another animated slide, and start it from beginning when user again chose this slide.

I've wrote a simple code, just for test.. But it doesnt work. In code above I've wrote $('.chart-bar').stop(); in pause, to check if this will stop at least one chart-bar animation but it doesnt. In reset I've wrote $this.count = 0; to reset number on the .badge element - but it doesnt work as well..

Obviously, to run those lines of code I've put a simple code on the bottom of script (code below).

$('#slider-2, #slider-3').hide();
$('.tour-slider').on('click', 'li a', function(e){
    e.preventDefault();
    $(this).closest('.slider').hide();
    var sliderHref = $(this).attr('href');
    $(sliderHref).fadeIn();
    if(sliderHref == '#slider-1'){
        anim1.start();
        anim3.pause();

    }else if(sliderHref == '#slider-2'){
        anim2.start();  
        anim3.pause();
    }else if(sliderHref == '#slider-3'){
        anim3.reset();
        anim3.start();   
        anim3.pause();
    }
});

As you can see, I even run a anim3.pause(); at once, after I start it - just to check, if it will stop immediately - but even one chart-bar didn't stop..

So now, can somebody tell my please, how can I stop (and reset) these animated elements? I just need to get one working example and rest I can do by my own.

I will be grateful for any help

Cheers!

Answer 1

Ok, I found a solution.

1st of I modify a bars() function (add if statement)

        function bars() {

        var barHeight = 0;
        var loop = true;

        $('.chart-bar').each(function () {

            barHeight = Math.floor(Math.random() * 100);

            $(this).delay(1000).animate({
                'height': barHeight + '%',
                'min-height': '20px'},
                700, function(){

            if (loop) {
                bars();   
            }

             });
        });

    }

And then all I need was those two line of code added into my pause method:

   pause: function() {
       var $this = this;
       $('#animation-3').find('*').stop(true, false);
       $this.loop = false;
   }

Thanks everyone for your time :)