jQuery - .fadeIn() 및 .fadeOut() - DIV 교환하기

display:none;으로 숨겨진 일부 div가있는 HTML 페이지가 있는데 .fadeIn()과 .fadeOut()을 서로 바꿀 수 있기를 바랍니다. 여기jQuery - .fadeIn() 및 .fadeOut() - DIV 교환하기

$('#footer a').click(function() {     
    $('#content > *').fadeOut('fast', function(){ 
     $('#contact').fadeIn('slow'); 
    }); 
    return false; 
});

을 그리고 HTML 레이아웃의 빠른 생각한다 :

<html> 
<head></head> 
<body> 
<div id="content"> 
<div id="contact"></div> 
<div id="about"></div> 
<div id="main"></div> 
</div> 
</body> 
</html>

내가 현재 단지를해야 링크 설정이있어, 여기에 자바 스크립트 내가 시도하고있다

따라서 .fadeIn()은 .fadeOut()의 콜백으로 표시되지만 새로운 콘텐츠가 페이드 인 할 때까지 이전 콘텐츠가 계속 표시됩니다. jQuery가 외부 HTML에 적용되지 않고서 .load()으로 삽입되는 것과 같은 모든 종류의 다른 이상한 것은 말할 것도 없지만 그것은 내가 생각하는 또 다른 게시물을위한 것입니다.

출처

2010-07-26 Benji

하지만, 난 여전히 새로운 내용이 페이드 있는 시간에 의해 이전 내용의 플래시를 볼! 때문에 fadeOut에 콜백의 가장 가능성

, 대신을 시도해보십시오 답변

$('#footer a').click(function() {     
    $('#content > *').stop().fadeOut('fast'); 
    $('#contact').delay(1000).fadeIn('slow'); 
    return false; 
});

출처

2010-07-26 08:12:00 Sarfraz

감사합니다. 나는 콜백에서 .fadeIn()을 가져 가려고했지만, 아무 소용이 없습니다. 어쨌든 콜백에 넣는 것이 가장 좋을 것 같았습니다. 단지 내용이 표시되기 전에로드되도록하는 것입니다. 너무 간단하지만 작동하지 않습니다. 모든 문제 중 가장 좌절! – Benji

@BenjiBee : 제 코드를 수정했습니다. 시도해주세요. – Sarfraz

이것은 확실히 작동하지만 점프를 감추지는 못하지만 가장 좋은 해결 방법이 아닌 것처럼 보입니다. 내 말은, 스크립트에서 수 밀리 세컨드 (milliseconds)의 면도를하는 웹에 관한 기사가 수천 가지에 이르렀으므로 결함 인 것처럼 보이기 때문에 1 초의 일시 중지를 추가하는 것은 다소 바보 같습니다. 내가 너무 많은 내장 jQuery 명령을 기대할 수 있다고 생각합니다. 내 접근 방식에서 너무 낙관적이거나 단순한가? – Benji

jQuery - .fadeIn() 및 .fadeOut() - DIV 교환하기

답변

관련 문제