2011-10-03 149 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

因为脚本应该总是静态资产后装?

大多数浏览器从上到下逐行显示,因此一行上的更改可以在下一行再次更改。

如果先加载脚本,则样式将更改脚本。