2011-10-03 146 views
0

您好我做一個簡單的擴大滑蓋jQuery的 並以某種方式滑塊將擴大到窗口的全寬度 ,然後收縮到所需的寬度我分配它做..鏈接外部樣式表衝突與腳本src加載jquery?

(如果你重新加載頁面幾次,它出現有時)

問題似乎消失切換加載順序的 和jQuery和我之間外部樣式表

但我不知道爲什麼,我想知道是否有人知道?

這裏是造成問題的代碼

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" /> 

<script> 
$(document).ready(function(){ 
$("#slider").animate({width:'100px'},1300); 
}); 
</script> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>TEST</title> 
</head> 

<body> 

<div id="slider"> 
</div> 

</body> 
</html> 

CSS:

#slider{ 
width:10px; 
height:20px; 
background:#09C; 
} 

開關的順序和 後不斷擴大的問題消失:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<link type="text/css" href="screen.css" rel="stylesheet" media="screen" /> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 

<script> 
$(document).ready(function(){ 
$("#slider").animate({width:'100px'},1300); 
}); 
</script> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>TEST</title> 
</head> 

<body> 

<div id="slider"> 
</div> 

</body> 
</html> 

CSS:

#slider{ 
width:10px; 
height:20px; 
background:#09C; 
} 

回答

0

因爲腳本應該總是靜態資產後裝?

大多數瀏覽器從上到下逐行顯示,因此一行上的更改可以在下一行再次更改。

如果先加載腳本,則樣式將更改腳本。