프로젝트에서 왼쪽 메뉴를 접고 표시하는 효과를 구현합니다. 이는 소프트웨어 인터페이스에서 일반적입니다. (원래는 온라인으로 코드 조각을 복사하는 것입니다. 저보다 글을 더 잘 쓰실 것 같지만 배우려면 Spirit^^!),
숨겨진 확장을 구현하기 위해 .animate()를 사용하는데 코드는 다음과 같습니다.
제목 없는 문서 🎜><-
.left {
너비:100px
높이:500px
float:left; butid {
너비:10px;
배경:#C00;
float: 왼쪽
.content {
너비: 500px; >높이:500px;
배경:#000;
색상: #FFF
}
--> ;/head>
<스크립트 유형= "text/javascript" >
$(function(){
var i = 1;//상태 판단 설정
$('#butid').click(function(){
if (i == 1 ){
$('.content').animate({left: '-=100px',width: '600px'}, "slow")
$('.left' ).animate({ 너비: '0px'}, "느림");
i = 2
}else{
$('.content').animate({왼쪽: '0px', width: '500px' }, "slow");
$('.left').animate({width: '100px'}, "slow");//fadeOut()
i = 1;
}
})
123
"butid">
123
그렇다면 자막이라면 FF, IE7-8, 크롬에서는 정상적으로 실행됩니다. 하지만 IE6에서는 왼쪽을 숨길 수 없습니다. 그 이유는 IE6의 기본 콘텐츠 높이와 너비를 초과하면 DIV가 자동으로 확장되기 때문입니다. 그러니까 .left{}에 Overflow:hidden만 추가하면 문제는 해결되겠죠~~
PS: 원래 오늘 아침에 .left에 내용을 숨기는 함수를 썼는데, 글을 쓰다가 갑자기 이런 걸 알았네요. 원칙적으로는 IE6의 .animate()에 있는 버그인 줄 알았습니다.