•  19-09-2019
  •  | 
  •  

문제

ID '컨텐츠'가있는 div가 있습니다. 눈에 보입니다. 

<div id="wrapper" style="display:block">
  <div id="content">
    Some text
  </div>
</div>

이제 나는 그것을 희미 해지고 싶다 :

$('#wrapper').fadeIn( 1500 );
$('#content').click(function(){
   $(this).fadeOut( 1500 );
});

그리고 아무 일도 일어나지 않습니다. 그러나 내가 썼을 때 :

$('#content').fadeIn( 1500 );

숨어서 다시 보여줍니다.

여기 CSS가 있습니다

#content
{
    height: 100%;
    width: 100%;
}

브라우저 : Linux Gentoo의 Firefox 3.5.3

upd

코드를 입력 할 때 :

$('#content').hide();

올바르게 숨 깁니다.

upd

문제를 해결했습니다 ... 이해할 수 없습니다. 왜 그랬는지 ... 그냥 jquery.min을 jQuery로 대체했습니다.

도움이 되었습니까?

해결책

내가 당신의 질문을 이해하면 두 가지 문제가 있습니다. 내용이 사라지지 않으며 클릭하면 콘텐츠가 사라지지 않습니다.

두 가지 문제는 아마도 래퍼와 컨텐츠 div가 문서에 나타나기 전에 스크립트를 실행함으로써 발생할 수 있습니다. 당신의 경우 <script> 태그가 있습니다 <head> 그러면 당신의 문서의 $('#wrapper') 사라질 아무것도 찾을 수 없습니다 $('#content') 클릭 핸들러를 첨부 할 것이 없습니다.

최상의 솔루션은 아마도 문서가로드 될 때까지 무엇이든하는 것을 연기하는 것입니다. ready:

$(document).ready(function () {
  $('#wrapper').fadeIn(1500);
  $('#content').click(function () {
    $(this).fadeOut(1500);
  });
});

또는 당신은 당신을 넣을 수 있습니다 <script> 꼬리표 ~ 후에 그만큼 <div> 신체의 태그.

이 문제를 해결하면 콘텐츠가 사라지지만 래퍼 디스크가 처음에는 보이기 때문에 부드럽 지 않을 것입니다. style="display:block" 래퍼 디스크에서. 당신은 그것을 만들어야합니다 display: none; 대신 페이지가로드되는 동안 래퍼 디바리가 숨겨져 있습니다.

다음은 작동하는 완전한 파일입니다.

<html>
<head>
<style type="text/css">
#wrapper
{
    display: none;
}

#content
{
    height: 100%;
    width: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  window.alert("Couldn't load jQuery");
</script>
<script>
$(document).ready(function () {
  $('#wrapper').fadeIn(1500);
  $('#content').click(function () {
     $(this).fadeOut(1500);
  });
});
</script>
</head>
<body>
<div id="wrapper">
  <div id="content">
    Some text
  </div>
</div>
</body>
</html>

다른 팁

OSX의 Firefox. 중복이있는 경우 ID가 고유한지 확인하십시오. 제대로 작동하지 않을 수 있습니다. 또한 스타일 : 블록은 중복이며 DIV는 기본적으로 블록입니다.

당신은 페이드 아웃에 $ ( '#content')를, 페이드 인에 $ ( '#conent')를 썼습니다. 다른 효과는 정확히 같은 방식으로 불려지고 왜 그들이 예상대로 작동하지 않는지에 대한 설명을 제공하지 않습니다.

당신은 또한 "#wrapper"(jQuery의 1 행)에 #을 남겨두고 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top