정확한 로그 메시지에도 불구하고 JQuery fadeIn()이 작동하지 않음

Question

안녕 얘들 아!

최근에 작성한 홈페이지에 약간의 문제가 있습니다. 클래스 "content"로 HTML div를 퇴색 시키려고했는데 두 로그 메시지를 콘솔에 출력했지만 여전히 페이드 인합니다!

는

나는, 물론, 그 코드 제거 모든 필요하지 않은 정보는

가 여기 내 HTML

<div class="content"> </div> 

그리고 내 CSS

.content{ 
margin: 0px; 
position: fixed; 
display:none 
background-image: url("../img/city_topdown_blurred.png"); 
background-size:cover; 
width: 100%; 
height: 100%; 
} 

그리고 마지막으로 내 jQuery의 니펫

$(document).ready(function(){ 
    console.log("fading in"); 
    $('.content').fadeIn("slow", function(){ 
    console.log("fading done"); 
    }); 
}); 

시간이 10000 이상으로 설정된 경우에도 두 가지 로그 메시지가 즉각 브라우저 (Chrome) 으로 푸시됩니다.

Answer 1

현재하는 ;에 그것을 다시 추가 display: none 후 그것을 해결하기 위해 보인다 누락하는 작업 예입니다 https://jsfiddle.net/nbekm981/1

누락 ; 그것이 잘못된 display: none background-image: url("../img/city_topdown_blurred.png");를 설정했기 때문에 그것이 파산 이유를. 유효하지 않았기 때문에 기본값은 display: block; (자동으로 표시됨)입니다. 따라서 페이드 인은 이미 시작되기 전에 이미 완료되었습니다. 당신이 그것을 퇴색하기 전에 이미지를 미리로드 할 수 있습니다

Answer 2

당신은 또한 display:none;

후 세미콜론 누락, (배경에) 이미지가 너무로드 조금 걸릴 수 있습니다.

참조 아래 실행 데모 :

$(document).ready(function() { 
 
    // pre-load the image 
 
    $('<img/>').attr('src', 'http://lorempixel.com/1024/1024').load(function() { 
 
    console.log("image done loading"); 
 
    // prevent memory leaks 
 
    $(this).remove(); 
 

 
    // assign image to .content 
 
    $('.content').css('background-image', 'url(http://lorempixel.com/1024/1024)'); 
 

 
    console.log("fading in starts"); 
 
    // fade in 
 
    $('.content').fadeIn(2000, function() { 
 
     console.log("fading done"); 
 
    }); 
 
    }); 
 
});

.content { 
 
    margin: 0; 
 
    position: fixed; 
 
    display: none; 
 
    /*background-image: url("http://lorempixel.com/1024/1024"); 
 
    background-color: green;*/ 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
</div>

Answer 3

jQuery 설명서에서

.fadeIn() 메서드는 일치하는 요소의 불투명도를 애니메이션으로 만듭니다. .fadeTo() 메서드와 비슷하지만이 메서드는 요소를 숨김 해제하지 않고 최종 불투명도 수준을 지정할 수 있습니다.

나는 display: none으로 움직이지만, opacity: 0으로는 움직이지 않을 것이라고 생각합니다.