4
jQuery를 사용하여 div를 페이드 아웃하려고합니다. fadeOut 함수를 사용합니다. 대부분의 경우 제대로 작동하는 것으로 보이지만 경우에 따라 모든 콘텐츠가 사라지는 것은 아닙니다. 내가 절대적으로 배치 된 요소와 div 안에 floated 요소를 가지고 있다면 fadeOut 함수가 작동하지 않습니다. 만약 내가 절대적으로 위치 된 엘레멘트 만 가지고 있다면 그것은 작동하지 않는다. 그러나 절대적으로 배치 된 요소와 unstyled 요소가 있으면 작동합니다. 이 설명하기 어려운 들릴지 모르지만,이 테스트 코드를 사용하여 그것을 자신을 시도 할 수 있습니다 :float 요소와 절대 위치 요소가있는 요소에서 jQuery fadeOut 함수를 사용할 때 이상한 동작이 발생합니다.
이<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>jQuery fadeOut test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div id="testBox1" style="position: relative">
<div>test</div>
<p style="position: absolute; left: 0; top: 0">This text should fade out.</p>
</div>
<br><br>
<button type="button" onclick="$('#testBox1').fadeOut()">fade out</button>
<!-- works -->
<hr>
<div id="testBox2" style="position: relative">
<div style="float: left">test</div>
<p style="position: absolute; left: 0; top: 0">This text should fade out.</p>
</div>
<br><br>
<button type="button" onclick="$('#testBox2').fadeOut()">fade out</button>
<!-- doesn't work -->
<hr>
<div id="testBox3" style="position: relative">
<p style="position: absolute; left: 0; top: 0">This text should fade out.</p>
</div>
<br><br>
<button type="button" onclick="$('#testBox3').fadeOut()">fade out</button>
<!-- doesn't work -->
</body></html>
Working Example Here (예 놀 URL에 /편집 추가).
IE7에서는 모든 것이 잘 작동하는 것으로 보이지만 Firefox와 Chrome에서는 이상한 동작이 나타납니다. 왜 그럴 수 있니? 뭔가 잘못되었거나 jQuery 내의 브라우저 버그 또는 버그입니까?
당신, 그러한 구원자;) – sepehr