2011-04-27 8 views
1

내 페이지 본문에 fadeIn 효과를 사용하고 있지만, 이미지의 body 태그에 포함 된 큰 배경 이미지가있는 특정 페이지가 있지만 사라지지 않는 특정 페이지가 있습니다. 효과. 나는 그것을 어떻게 얻을 수 있습니까? 여기에 내 현재 코드 ..배경 이미지 fadeIn 문제

$(document).ready(function() { 
    $("body").css("display", "none"); 
    $("body").fadeIn(3000); 
}); 

body{ 
    background: #ffffff url("../images/test.jpg") no-repeat; 
    z-index: -2; 
} 
+1

중복 가능한 http://stackoverflow.com/questions/977090/jquery-fade-in-background-image –

답변

3

가 나는 그것이 <body> 퇴색 할 수 생각하지 않습니다이 CSS 클래스를 만드는이 방법을 수정은 - a는 해결 방법은 컨테이너의 모든 것을 랩핑하고 그 위에 이미지를 설정하는 것입니다.

HTML :

<body><div id="container">**all your site content goes here**</div></body> 

JS :

$(document).ready(function() { 
    $('#container').hide().fadeIn(3000); 
}); 

바이올린 :http://jsfiddle.net/ztXnZ/2/


편집 : 재미는 body 태그의 내용은 퇴색 될 수 있지만 줘야 body 태그의 CSS 배경에는 아무런 영향을 미치지 않습니다. 여기에 시연 : http://jsfiddle.net/Fxvdz/

+0

+1과 같은 해결책을 알았습니다. :-) – andyb

0

코드

$(document).ready(function() { 
    $("body").css("display", "none"); 
    $("body").addClass("body1").fadeIn(3000); 
}); 

.body1 { 
    background: #ffffff url("../images/test.jpg") no-repeat; 
    z-index: -2; 
} 
+0

Chrome에서 나와 작동하지 않습니다. [jsfiddle.net] (http://jsfiddle.net/)에서 데모를 만들 수 있습니까? – andyb

+0

확실 하리라 생각합니다. [내] (http://jsfiddle.net/ywZqA/)가 "스타 워즈"를 추가했다는 것을 제외하고는 – abhijit