2011-10-03 6 views
0

안녕하세요 다음, 윈도우의 전체 폭 로 확장 (나는 그것을 할 할당 원하는 폭 ..외부 스타일 시트를 스크립트 src와 충돌 링크 jquery를로드 중입니까?

로 축소 할 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

을로드해야하기 때문에?

대부분의 브라우저는 한 줄씩 위에서 아래로 렌더링하므로 한 줄의 변경 사항을 다음 줄에서 다시 변경할 수 있습니다.

먼저 스크립트를로드하면 스타일이 스크립트를 변경합니다.

관련 문제