jQuery css3下载按钮状态切换动画特效免费下载

一款简单好看又实用的jQuery css3下载按钮状态切换动画特效,点击按钮切换显示百分比下载进度条加载动画,加载完毕后又切换到文字提示“下载完成”。

JS代码

<script> 
$('.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); 
      } 
    }); 
}</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录