避免jQuery代码重复

我正在制作一个动画进度条。它的代码是很简单，但问题是，我无法弄清楚如何避免重蹈一些jQuery代码，你可以看到它在这个小提琴：避免jQuery代码重复

基本上，这就是重复：

$('.bar-value').animate({width: '+=1%'},50,function(){ 
    var percent = $('.bar-value').width()/$('.bar-value').parent().width()*100; 
    var percInt = parseInt(percent); 
    $('.progress').text(percInt+"%"); 
});

只是增加1％的内部div（progress）的宽度，并增加.progress跨度数为1。有什么办法做我想做的事情，而不重复该代码？

在此先感谢！

来源

2014-05-05 mrpinkman

你调查过[jQuery UI的进度]（http://jqueryui.com/progressbar/）？ – royhowie

你可以在for循环中包装那一点。 –

@Luxelin哈哈yess但我喜欢自己做事 – mrpinkman

只要给期限和数额你想动画：

$('.bar-value').animate({width: '+=100%'},2000,function(){ 
    var percent = $('.bar-value').width()/$('.bar-value').parent().width()*100; 
    var percInt = parseInt(percent); 
    $('.progress').text(percInt+"%"); 
});

来源

2014-05-05 01:00:11

会尝试这个！ – mrpinkman

我真的怀疑这是正确的。如果每个“酒吧价值”都有一个“进步”，那么这根本就不对。他在调用'.animate（）'时已经循环了。 –

真实的陈述cookie怪物，我没有看那么近！根本不需要循环。只需从0-100％制作动画并设置适当的持续时间。 –

使用递归：

function showProgress(finish) { 
    $('.bar-value').animate({ 
     width: '+=1%' 
    }, 50, function() { 
     var percent = $('.bar-value').width()/$('.bar-value').parent().width() * 100; 
     var percInt = parseInt(percent); 
     $('.progress').text(percInt + "%"); 

     if (percInt != 100) { 
      showProgress(finish); 
     } else { 
      if (finish) finish(); 
     } 
    }); 
}

Fiddle

编辑：修复

来源

2014-05-05 01:00:47 Jefraim

为什么在使用迭代更优雅地使用递归时使用递归？ –

递归对我来说更加优雅。 – Jefraim

直到内存不足。如果可以使用它，迭代几乎总是更好。 –

当然，该代码是疯狂的！

因此，我建议你使用jQuery UI progress bar

否则，您可以使用一个循环做你正在努力实现的：

http://jsfiddle.net/db306/N6c2q/3/

$(document).ready(function(){ 
    var percent = $('.bar-value').width()/$('.bar-value').parent().width()*100; 
    $('.progress').text(percent+"%"); 

    $('button').click(function(){ 
     $('.loader').fadeIn(1200); 
     $('button').attr('disabled','disabled'); 


     for (var i=0; i<100;i++){ 
      $('.bar-value').animate({width: '+=1%'},50,function(){ 
      var percent = $('.bar-value').width()/$('.bar-value').parent().width()*100; 
      var percInt = parseInt(percent); 
      $('.progress').text(percInt+"%"); 
     }); 
     } 
    }); 
});

来源

2014-05-05 01:08:46 db306

避免jQuery代码重复

回答

相关问题