Question

我想要一个进度条。我下载了一个，但它显示了反向动画。我试过搞清楚，但似乎没有任何工作任何想法如何解决它？

这是我的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 + "%&nbsp;");
}

修改过的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);
}

Answer 1

您需要将内部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);
}

http://jsfiddle.net/pjg99q7s/

稍微好一点的例子：

http://jsfiddle.net/pjg99q7s/2/

jquery中的进度条显示反向动画

1 个答案: