jQuery点击下载按钮加载进度百分比动画js特效代码

最新推荐文章于 2024-07-19 03:08:02 发布

转载最新推荐文章于 2024-07-19 03:08:02 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yy123.ink/frontDetail/11643

文章标签：

#jquery #javascript #动画

网站模版专栏收录该内容

3170 篇文章

订阅专栏

这段代码实现了一个按钮点击事件，当按钮被激活时，会显示进度条动画，从0%渐变到100%，并在完成后淡出。动画时长为5秒，完成后按钮将重置状态。

下载地址

相关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(); }});//Loadingfunction 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); } });}