JQuery와 동하중 애니메이션

<!DOCTYPE html> 
<html> 
<head> 
<script src="jquery.js"></script> 
<script> 
$(document).ready(function() 
{ 
    $("a").click(function(){ 
     $("#bg").slideToggle(1000,function(){ 
      $("#content").hide('fast',function(){ 
       $("#content").load($(this).attr('href'),function(){ 
        $("#bg").slideToggle(1000); 
       }); 
      }); 
     }); 
    }); 
}); 
</script> 

<style> 
    nav ul li 
    { 
    display: inline; 
    padding: 0px 20px; 
    text-decoration: none; 
    } 

    #bg 
    { 
    transition: all 2s; 
    background-color: gray; 
    z-index:25; 
    width: 100%; 
    height: 0px; 
    } 

</style> 

</head> 

<body> 

<div> 

    <h2>DEMO</h2> 

    <nav> 

     <ul> 
      <li><a href="first.html#content">First</a> 
      <li><a href="second.html#content">Second</a> 
      <li><a href="third.html#content">Third</a> 
     </ul> 

    </nav> 

    <div id="all"> 

<div id="bg"></div>   
     <p id="content">banna third Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> 


    </div> 

</div> 

</body> 
</html>

전 내용이 loade되어야 좋은 부분 콘텐츠 동적 로딩하지만 난이 가지고 싶은 이런 두 HTML 파일이있을 때,이 경우 제에게에 커튼 (div가 배경 회색으로 표시됨)가 발생하면 사용자보기에서 숨겨져 야합니다. 내가 얼마나 그 효과에 도달 할 수없는 메신저를 시도합니다.JQuery와 동하중 애니메이션

출처

2012-12-31 Code Name

내 #bg 0의 높이를 갖는다; 그래서 당신은 slideToggle이 0에서 0으로 갈 것입니다. 콘텐츠가 없기 때문에 높이를 정의해야합니다. 내가 추천하는 것은 컨테이너의 높이와 #bg를 절대적으로 배치 한 다음 bg를 맨 위에 놓고 내용을 숨기고 바꿀 수 있습니다. – Syon

고맙습니다.하지만 문제는 내가 만났기 때문입니다. 크롬의 파일에서 파일 액세스 허용 플래그 ... :) –

<div id="bg"> 이후에 닫는 코드 div이있을 수 있습니다. (이후 코드에 빈 div가 표시되거나 숨겨 짐을 의미합니다.)

CSS에서 #bg의 height: 0px을 제거하려는 경우 빈 div를 더욱 효과적으로 숨길 수 있기 때문입니다. 두 변화

는이 바이올린 일부 제 애니메이션 표시 개시 : http://jsfiddle.net/PvPv3/

출처

2012-12-31 18:02:55

JQuery와 동하중 애니메이션

답변

관련 문제