로드 할 때 왜 fadeIn이 깜박입니까?

YouTube 튜토리얼에서 사이트를 만들었습니다. Here's my test site. 그리고 도움이된다면 here's the tutorial (final step of 3). CSS가 아직 사용되지 않았습니다.로드 할 때 왜 fadeIn이 깜박입니까?

메뉴에서 링크를 클릭하면. 모든게 사라져 버렸어. 그러나 페이드 애니메이션이 끝나면 이전 페이지가 깜박입니다.

me
저는 JavaScript가 완전히 새로 도입되었습니다.

의 index.php :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>SuperFresh</title> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 
<a class="menu_top" href="pages/home.php">Home</a>/
<a class="menu_top" href="pages/portfolio.php">Portfolio</a>/
<a class="menu_top" href="pages/contact.php">Contact</a>/

<div id="content_area"></div> 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="js/nav.js"></script> 
</body> 
</html>

nav.js :

$(document).ready(function() { 
    $('#content_area').load($('.menu_top:first').attr('href')); 
}); 

$('.menu_top').click(function() { 
    var href=$(this).attr('href'); 
    $('#content_area').hide('slow').load(href).fadeIn('slow'); 

    return false; 
});

출처

2013-01-18 naPalmqvist

jsfiddle 당신은 맞다 –

를 도움이 될 것이다. 그러나 index.php가 작동하지 못했습니다. =/그래서 테스트 사이트를 submittet ... – naPalmqvist

교체 :

var href=$(this).attr('href');  
$('#content_area').hide('slow').load(href).fadeIn('slow');

으로 :

$('#content_area').hide('slow', function(){ 
    $(this).load($(this).attr('href')).fadeIn('slow'); 
});

이렇게하면 페이드 아웃되고 애니메이션이 완료 될 때까지 기다렸다가 해당 기능을 호출하고 새 콘텐츠를로드하기 전에 대기합니다.

자세한 내용은 the documentation을 확인하십시오.

출처

2013-01-18 09:59:51

깜박 거리지 않지만 href는 단지 내가 클릭하고있는 링크를 표시하는 home.php를 보여줍니다. [test site] (http://superfresh.se/laddasidan_stackflow02/)를보십시오. – naPalmqvist

이 작업을 시도 할 수 있습니다 :

$('.menu_top').click(function() { 
    var href=$(this).attr('href'); 
    var page = $('<div/>').attr('id','page').load(href); 
    $('#content_area').fadeOut('slow').html('').html(page).fadeIn('slow'); 

    return false; 
});

출처

2013-01-18 10:08:45 Jai

[여기 코드에 있습니다] (http://superfresh.se/laddasidan_stackflow01/) Jai. 이제는 두 번 사라집니다. 그러나 그것은 이전보다 덜 자극적입니다. 왜 그것이 fadein을 두 번하는지 알아? – naPalmqvist

방금 코드를 업데이트했습니다. – Jai

업데이트로 [테스트 사이트] (http://superfresh.se/laddasidan_stackflow01/)를 업데이트했습니다. 그러나 여전히 두 가지의 퇴색이 있습니다. 너는 나보다 배반이야. 너의 업데이트가하는 것을 볼 수 없어. – naPalmqvist

당신이 당신의 자신의 기능 핸들러를 사용할 수 있습니다 ...

예를 들면 다음과 같습니다

$('#show').click(function() { 
    $('#myDiv').show(0, onDivShow); 
}); 

$('#hide').click(function() { 
    $('#myDiv').hide(0, onDivHide); 
}); 


function onDivShow() { alert('is shown'); } 
function onDivHide() { alert('is hidden'); }

출처

2013-01-18 10:21:42

자바 스크립트에 대해 거의 알지 못해서 코드를 구현할 수 없습니다. 너무 나쁘다. – naPalmqvist

로드 할 때 왜 fadeIn이 깜박입니까?

답변

관련 문제