jQuery点击下载按钮加载进度百分比动画特效代码5427
相关js代码
$('.buttonContainer').click(function(){
	if($('.buttonContainer').hasClass('active')){
		$(this).removeClass('active');
		$('.complete').removeClass('fadein');
		$('#counter').fadeOut(100);
		$('.ball').fadeOut(100);
		count().stop;
	} else{
		$(this).addClass('active');
		$('#counter').fadeIn(200);
		$('.ball').fadeIn(200);
		count();
	}
});

//Loading
function count(){
	$({countNum: $('#counter').text()}).animate({countNum: 100}, {
	  duration: 5000,
	  easing:'linear',
	  step: function() {
		 $('#counter').text(Math.floor(this.countNum) + '%');
	  },
	  complete: function() {
		 $('#counter').fadeOut(200);
		 $('.complete').addClass('fadein');
		 $('.ball').fadeOut(200);
		  $('#button').fadeOut(100);
		  setTimeout(function() {
			   $('.buttonContainer').removeClass('active');
			  $('.complete').removeClass('fadein');
			  $('#button').fadeIn(200);
   		}, 1000);
	  }
	});
}
      立即下载 ( 文件大小:0.03 M)

    浏览器兼容性

    1. IE 9
    2. Mozilla Firefox
    3. Google Chrome
    4. Oper
    5. Safari

    技术讨论区

    1. 请先登录

        发 布

    键盘快捷键: 上一个 下一个