Question

您好我正在使用 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; 
}

Answer 1

因为脚本应该始终在静态资产之后加载吗？

大多数浏览器从上到下逐行渲染，因此在一行上进行的更改可以在下一行再次更改。

如果首先加载脚本，那么样式将更改脚本。

链接外部样式表与脚本src加载jquery冲突？

1 个答案: