我想要一个进度条。我下载了一个，但它显示反向动画。我已经尝试弄清楚了，但似乎没有任何效果知道如何解决它吗？？？
这是我的html
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="progressbar.js"></script>
<link rel="stylesheet" type="text/css" href="progressbar.css">
<link rel="stylesheet" type="text/css" href="skins/default/progressbar.css">
</head>
<body>
<div id="progressBar" class="default"><div></div></div>
<script>
progressBar(40, $('#progressBar'));
</script>
</body>
</html>
这是我的CSS
.default {
background: #292929;
border: 1px solid #111;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 5px #333;
}
.default div {
background-color: #1a82f7;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7));
background: -webkit-linear-gradient(top, #0099FF, #1a82f7);
background: -moz-linear-gradient(top, #0099FF, #1a82f7);
background: -ms-linear-gradient(top, #0099FF, #1a82f7);
background: -o-linear-gradient(top, #0099FF, #1a82f7);
}
最后是javascript文件
function progressBar(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
}
修改后的CSS
.default {
background: #292929;
border: 1px solid #111;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 5px #333;
}
.default div {
width: 0;
background-color: #1a82f7;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7));
background: -webkit-linear-gradient(top, #0099FF, #1a82f7);
background: -moz-linear-gradient(top, #0099FF, #1a82f7);
background: -ms-linear-gradient(top, #0099FF, #1a82f7);
background: -o-linear-gradient(top, #0099FF, #1a82f7);
}
最佳答案
你的内部 div 宽度需要从 0 开始，否则它的宽度将默认为 100%:
.default div {
width: 0; /* <--- here */
background-color: #1a82f7;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7));
background: -webkit-linear-gradient(top, #0099FF, #1a82f7);
background: -moz-linear-gradient(top, #0099FF, #1a82f7);
background: -ms-linear-gradient(top, #0099FF, #1a82f7);
background: -o-linear-gradient(top, #0099FF, #1a82f7);
}
稍微花哨的例子:
关于javascript - jquery 中的进度条显示反向动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25738826/