如何停止和重置對象中的幾個動畫元素？ （幾個獨立的動畫）

Question

我創建了一些動畫，每個動畫都應該是主站點滑塊上的單獨幻燈片。
這就是爲什麼，我從我的老闆那裏得到了一個對象結構（下面的代碼），他說我應該將它用於這些動畫。

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

但是因爲我沒有更的經驗與對象的工作，我只是貼上所有的動畫功能到「開始」的，只是爲了看看會發生（代碼如下所示）是什麼。

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: { 


    } 
}); 

它的工作！當我運行anim3.start時，動畫將開始。但是現在..我該如何阻止它？因爲我們必須在用戶選擇另一個動畫幻燈片時停止它，並在用戶再次選擇此幻燈片時從頭開始。

我寫了一個簡單的代碼，只是爲了測試..但它沒有工作。 在上面的代碼中，我寫了$('.chart-bar').stop();暫停，以檢查這是否會停止至少一個圖表欄動畫，但它沒有。 在復位我寫$this.count = 0;到.badge元素重置數 - 但它不很明顯的工作以及..

，運行這些代碼行我已經把一個簡單的代碼在腳本的底部（代碼如下）。

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

正如你所看到的，我甚至跑anim3.pause();一次，之後我開始了 - 只是爲了檢查，如果它會立即停止 - 但即使一個圖巴並沒有停止..

現在，有人可以告訴我，請問我該如何停止（並重置）這些動畫元素？我只需要得到一個工作的例子，我可以自己做的休息。

我將不勝感激任何幫助

乾杯！

Answer 1

好吧，我找到了一個解決方案。

的我第一次修改酒吧（）函數（添加if語句）

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

      }); 
     }); 

    } 

然後我需要添加到我的停頓方法，這兩個行代碼：

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

謝謝大家爲你的時間:)