2012-01-11 17 views
0

我試圖讓我的代碼的HTML和一些reasong當我嘗試運行我的HTML文檔中的代碼,這是行不通的,但我對http://jsfiddle.net 嘗試相同的代碼和我的代碼,它正在http://jsfiddle.net/gPfBC/我的動畫進度條不起作用?

有人可以嘗試這個代碼,並把它給我的完整的HTML代碼?

<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function(){ 
    var p=0; 

    $("#myProgressBar").progressbar({value:0}); 
     var timer = setInterval(function(){ 
      //This animates the bar 
      $("#myProgressBar .ui-progressbar-value").animate({width: p+"%"}, 500); 
      //This does static sets of the value 
      //$("#myProgressBar").progressbar("option","value",p); 
      p = p +3; 
      if(p>33.33){ 
       $("#myProgressBar .ui-progressbar-value").animate({width: "33.33%"}, 500); 
       //$("#myProgressBar").progressbar("option","value",100); 
       clearInterval(timer); 
      } 
    },500); 
}); 
    </script> 
    <style type="text/css"> 
    </style> 
</head> 
<body style=" background:url(ebay-bar/images/1.jpg) top left no-repeat; width:1099px; height:1050px;"> 
<a href="2.html" style="width:185px; height:31px;position:absolute; left: 198px; top: 516px;"></a> 
<div style="width:954px; position:absolute; top:606px; left: 67px; height: 45px;"> 
<div id="myProgressBar" style="height:43px;"></div> 
</div> 
</body> 
</html> 

回答

1

您正在jsFiddle上運行jQuery 1.3.2和jQuery UI 1.7.2腳本,但您的html頁面已包含jQuery 1.5。

更換

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

你的腳本可能使用的是已被棄用的jQuery的1.5或存在的jQuery 1.5和jQuery UI 1.8之間的一些問題的功能。嘗試使用jQuery和jQuery UI的最新版本。

+0

非常感謝你,你完全正確!我沒有話要帶你!我在這裏瘋了:P – karlelizabeth 2012-01-11 07:58:50