0
所以我試圖做一個'技能'圖形加載時打開頁面。動畫HTML/CSS/jQuery技巧圖
使用html，css和jquery;但我無法弄清楚爲什麼小進度條不會顯示加載動作。我希望有人能帶領我正確的方向（提示）或找出什麼是錯的！
這就是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Skills</title>
<style>
#resumeProficiencies {
float: left;
clear: right;
width: 500px;
margin: 20px 0px 30px 30px;
}
#resumeProficienciesTop {
float: left;
clear: right;
width: 100%;
margin: -5px 0px 0px 0px;
text-align: left;
font-weight: 600;
}
#resumeProficienciesBottom {
float: left;
clear: right;
width: 80%;
margin: 2px 0px 0px 0px;
}
.progress {
background:#e9e5e2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#e9e5e2));
background-image: -webkit-linear-gradient(top, #dddddd, #e9e5e2);
background-image: -moz-linear-gradient(top, #dddddd, #e9e5e2);
background-image: -ms-linear-gradient(top, #dddddd, #e9e5e2);
background-image: -o-linear-gradient(top, #dddddd, #e9e5e2);
background-image: linear-gradient(top, #dddddd, #e9e5e2);
height:20px;
border-radius: 0px;
-moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
-webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
box-shadow: 0 1px 0px #bbbbbb inset, 0 1px 0 #fcfcfc;
}
.adobe, .html, .css, .jquery, .javascript, .bootstrap, .wordpress, .ui, .ux, .rwd, .mobile, .rapidproto {
-webkit-transition: width 4.50s ease !important;
-moz-transition: width 4.50s ease !important;
-o-transition: width 4.50s ease !important;
transition: width 4.50s ease !important;
}
</style>
</head>
<body>
<div id="resumeProficiencies">
<div id="resumeProficienciesTop" class="resumeProficienciesTop1">adobe creative suite cc</div><!--END resumeProficienciesTop-->
<div id="resumeProficienciesBottom">
<div class="progress">
<div class="adobe progress-bar progress-bar-info" role="progressbar" style="width: 0%">
</div>
</div>
</div><!--END resumeProficienciesBottom-->
<div id="resumeProficienciesTop">html5</div><!--END resumeProficienciesTop-->
<div id="resumeProficienciesBottom">
<div class="progress">
<div class="html progress-bar progress-bar-info" role="progressbar" style="width: 0%">
</div>
</div>
</div><!--END resumeProficienciesBottom-->
<div id="resumeProficienciesTop">css3/css</div><!--END resumeProficienciesTop-->
<div id="resumeProficienciesBottom">
<div class="progress">
<div class="css progress-bar progress-bar-info" role="progressbar" style="width: 0%">
</div>
</div>
</div><!--END resumeProficienciesBottom-->
<div id="resumeProficienciesTop">jquery</div><!-- END resumeProficienciesTop -->
<div id="resumeProficienciesBottom">
<div class="progress">
<div class="jquery progress-bar progress-bar-info" role="progressbar" style="width: 0%"></div>
</div>
</div><!--END resumeProficienciesBottom-->
<div id="resumeProficienciesTop">javascript</div><!--END resumeProficienciesTop-->
<div id="resumeProficienciesBottom">
<div class="progress">
<div class="javascript progress-bar progress-bar-info" role="progressbar" style="width: 0%">
</div>
</div>
</div><!--END resumeProficienciesBottom-->
<div id="resumeProficienciesTop">bootstrap</div><!--END resumeProficienciesTop-->
<div id="resumeProficienciesBottom">
<div class="progress">
<div class="bootstrap progress-bar progress-bar-info" role="progressbar" style="width: 0%">
</div>
</div>
</div><!--END resumeProficienciesBottom-->
<div id="resumeProficienciesTop">wordpress</div><!--END resumeProficienciesTop-->
<div id="resumeProficienciesBottom">
<div class="progress">
<div class="wordpress progress-bar progress-bar-info" role="progressbar" style="width: 0%">
</div>
</div>
</div><!--END resumeProficienciesBottom-->
<div id="resumeProficienciesTop">user interface (ui)</div><!--END resumeProficienciesTop-->
<div id="resumeProficienciesBottom">
<div class="progress">
<div class="ui progress-bar progress-bar-info" role="progressbar" style="width: 0%">
</div>
</div>
</div><!-- ENDresumeProficienciesBottom-->
<div id="resumeProficienciesTop">user experience (ux)</div><!--END resumeProficienciesTop-->
<div id="resumeProficienciesBottom">
<div class="progress">
<div class="ux progress-bar progress-bar-info" role="progressbar" style="width: 0%">
</div>
</div>
</div><!--END resumeProficienciesBottom-->
<div id="resumeProficienciesTop">responsive web design</div><!--END resumeProficienciesTop-->
<div id="resumeProficienciesBottom">
<div class="progress">
<div class="rwd progress-bar progress-bar-info" role="progressbar" style="width: 0%">
<span class="sr-only"></span>
</div>
</div>
</div><!--END resumeProficienciesBottom-->
<div id="resumeProficienciesTop">mobile app design</div><!--END resumeProficienciesTop-->
<div id="resumeProficienciesBottom">
<div class="progress">
<div class="mobile progress-bar progress-bar-info" role="progressbar" style="width: 0%">
<span class="sr-only"></span>
</div>
</div>
</div><!--END resumeProficienciesBottom-->
<div id="resumeProficienciesTop">rapid prototyping</div><!--END resumeProficienciesTop-->
<div id="resumeProficienciesBottom">
<div class="progress">
<div class="rapidproto progress-bar progress-bar-info" role="progressbar" style="width: 0%">
<span class="sr-only"></span>
</div>
</div>
</div><!--END resumeProficienciesBottom-->
</div>
<script>
$(document).ready(function() {
$('.adobe').css('width', '20%');
$('.html').css('width', '100%');
$('.css').css('width', '100%');
$('.lesssass').css('width', '50%');
$('.jquery').css('width', '70%');
$('.javascript').css('width', '55%');
$('.bootstrap').css('width', '90%');
$('.wordpress').css('width', '85%');
$('.ui').css('width', '100%');
$('.ux').css('width', '90%');
$('.rwd').css('width', '85%');
$('.mobile').css('width', '85%');
$('.rapidproto').css('width', '95%');
});
</script>
</body>
</html>
大量的代碼=的jsfiddle請。 – 2014-02-06 01:29:40