jquery 의.animate()함수 가 IE6 에서 의 문 제 를 해결 합 니 다.

프로젝트 에서 왼쪽 메뉴 를 접 고 표시 하 는 효 과 를 실현 합 니 다.이것 은 소프트웨어 인터페이스 에서 흔히 볼 수 있 습 니 다.저 는.animate()로 숨겨 진 전 개 를 실 현 했 습 니 다.코드 는 다음 과 같 습 니 다

 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>     </title> 
<style> 
<!-- 
.left { 
width:100px; 
height:500px; 
background:#060; 
float:left; 
} 
#butid { 
width:10px; 
height:500px; 
background:#C00; 
float: left; 
} 
.content { 
width:500px; 
height:500px; 
background:#000; 
float:left; 
color: #FFF 
} 
--> 
</style> 
</head> 
<body> 
<script type="text/javascript" src="thirdparty/jquery/jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
var i = 1;//       
$('#butid').click(function(){ 
if(i == 1){ 
$('.content').animate({left: '-=100px',width: '600px'}, "slow"); 
$('.left').animate({width: '0px'}, "slow"); 
i = 2; 
}else{ 
$('.content').animate({left: '0px',width: '500px'}, "slow"); 
$('.left').animate({width: '100px'}, "slow");//fadeOut() 
i = 1; 
} 
}); 
}); 
</script> 
<div class="left">123</div> 
<div id="butid"></div> 
<div class="content">123</div> 
</body> 
</html>

이렇게 되면 FF,IE7-8,chrome 에서 실 행 됩 니 다.그러나 IE6 에서 left 를 숨 길 수 없 는 이 유 는 ie6 기본 내용 의 높이 와 너비 가 초과 되면 DIV 가 자동 으로 열 리 기 때문이다.그래서.left{}에 overflow:hidden 을 추가 하면 문제 가 해 결 됩 니 다~~PS:원래 아침 에 함 수 를 써 서.left 안의 내용 을 숨 겼 는데 박문 을 쓸 때 갑자기 이 원 리 를 깨 달 았 습 니 다.animate()가 IE6 에 BUG 가 있 는 줄 알 았 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

IE6에서 캔버스 사용

다운로드 (Apache License, Version 2.0) 움직인 예 예 1 예 2 움직이지 않은 예 예 1 예 2 requestAnimationFrame이 없습니까?...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jquery 의.animate()함수 가 IE6 에서 의 문 제 를 해결 합 니 다.

좋은 웹페이지 즐겨찾기