Jquery Progress Bar ui-progress-bar

时间:2015-01-24 12:04:49

标签: javascript jquery progress-bar

我得到一个错误,我无法弄清楚如何解决它。此代码用于进度条。

  

TypeError:$(...)。animateProgress不是第55行的函数

我不确定是否要删除第6行的.fn,但我尝试了这一点,没有任何事情发生。

 (function( $ ){
// Simple wrapper around jQuery animate to simplify animating progress from your app
// Inputs: Progress as a percent, Callback
// TODO: Add options and jQuery UI support.

$.fn.animateProgress = function(progress, callback) {    
return this.each(function() {
  $(this).animate({
    width: progress+'%'
  }, {
    duration: 2000, 

    // swing or linear
    easing: 'swing',

    // this gets called every step of the animation, and updates the label
    step: function( progress ){
      var labelEl = $('.ui-label', this),
          valueEl = $('.value', labelEl);

      if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
        labelEl.hide();
      }else{
        if (labelEl.is(":hidden")) {
          labelEl.fadeIn();
        };
      }

      if (Math.ceil(progress) == 100) {
        labelEl.text('Done');
        setTimeout(function() {
          labelEl.fadeOut();
        }, 1000);
      }else{
        valueEl.text(Math.ceil(progress) + '%');
      }
    },
    complete: function(scope, i, elem) {
      if (callback) {
        callback.call(this, i, elem );
      };
    }
  });
  });
};
 })( jQuery );

$(function() {
// Hide the label at start
$('#progress_bar_itm .ui-progress .ui-label').hide();
// Set initial value
$('#progress_bar_itm .ui-progress').css('width', '7%');

// Simulate some progress
$('#progress_bar_itm .ui-progress').animateProgress(43, function() {
$(this).animateProgress(79, function() {
  setTimeout(function() {
    $('#progress_bar_itm .ui-progress').animateProgress(100, function() {
      $('#main_content').slideDown();
      $('#fork_me').fadeIn();
      });
    }, 100);
  });
});

});

0 个答案:

没有答案