페이드 인/아웃 페이지

페이드 인/페이 아웃은 정확히 here에 어떻게 도달합니까? 사이트가 'ajaxed'라는 느낌을 가지기를 바랍니다.페이드 인/아웃 페이지

출구 및 입구에 퇴색이 발생합니다. 원활하게 이루어집니다.

this와 비슷한 솔루션입니까?

내가 잘못하지 않으면 css3 애니메이션으로 페이드 인을 수행 할 수 있습니다. js는 보류를 트리거하고 exit시 fadeout CSS Anim을 사용하는 데 사용할 수 있습니까?

업데이트 : 방금 this을 발견했습니다. 훌륭해. 이견있는 사람? 첫 번째 링크에서 사용 된 솔루션과 어떻게 비교됩니까?

감사합니다!

출처

2013-02-22 vulgarbulgar

거친 눈길은 행동이 http://www.sagmeisterwalsh.com/js/init.js에 있음을 암시합니다. – jacob

jQuery로 어떻게 할 수 있는지 간단한 예를 들어 보겠습니다.

다음은 ajax로 fadeIn 및 fadeOut을 수행하는 방법에 대한 샘플 html 및 jQuery 코드입니다. divid menu으로 갖는 가지고와 I 위의 예에서 수행하고 어떤

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <title>Title</title> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript"> 

     $(function() 
     { 
      $("div#menu ul li a").click(function(e) 
      { 
       var href = $(this).attr('href'); 
       e.preventDefault(); 
       $.ajax({ 
        url : href, 
        dataType : 'html', 
        type : 'get', 
        beforeSend : function() 
        { 
         //code before send request 
        }, 
        success : function(htmlResponse) 
        { 
         $('#container').empty().html(htmlResponse).fadeIn('slow'); 
        } 
       }); 

      }); 
     }); 

    </script> 
</head> 
<body> 
    <div id="menu"> 
     <ul> 
      <li><a href="home.html">Home</a></li> 
      <li><a href="about.html">about</a></li> 
      <li><a href="contact.html">Contact</a></li> 
     </ul> 
    </div> 

    <div id="container"></div> 

</body> 
</html>

html는 샘플을 만들어 각각 3 그것에 linkli을 갖는 태그.

이제 해당 링크에 jQuery click event을 할당하고 href 속성을 가져오고 그 href에 jQuery.ajax을 사용하여 요청을 보냅니다.

지금 성공적인 응답에, 모든 결과를 html.

에 생성됩니다 htmlcontainer 내부 사업부를로드 그리고 당신은 또한 더 많은 애니메이션을 추가 할 수 있습니다 완료하지만 난 이해를 단순하게 유지했다.

출처

2013-02-22 06:18:15

페이드 인/아웃 페이지

답변

관련 문제