내가있는 내가

Question

여기 내 페이지의 HTML입니다 올바른 내 코드를 얻을 수 없습니다 나는 내 웹 페이지에 특정 효과를 추가 할 : 이제

<div id="container"> 

     <div id="lineandbutton"> 
         <div class="verticalline" style="display:none;"></div> 
        <div id="iwanimate" style="display:none;"> 
         <div id="iwabutton"> 
          <img src="siteimages/iwabutton.png" height="110px" width="110px"> 
         </div> 
        </div> 
     </div> 
     <div id="titlesonly"> 
         <div class="leftcontainer"> 
           <div class="projects" style="display:none;"> 
           <p id="projectstext"> <h2><a href="commercial/index.html" class="transition">PROJECTS</a></h2> </p> 
           </div> 
         </div>  
         <div class="rightcontainer"> 
           <div class="company"style="display:none;"> 
           <p id="projectstext"> <h2><a href="thecompany.html" class="transition">COMPANY</a></h2> </p> 
           </div> 
         </div> 
      </div> 

먼저 나는를 slidedown 싶어 iwabutton을 verticalline 및 fadein 한 다음 iwabutton을 클릭하여 Projects 및 Company 제목을 표시하십시오. 내가 제대로 헤드 섹션에 다음 코드를 넣어이 효과를 가지고 : 이제

<script> 
$(document).ready(function() { 
    $(".verticalline").slideDown("slow", "linear", function() { 
     $("#iwanimate").fadeIn(2000); 
    }); 
    $("#iwabutton").click(function() { 
     $(".projects").fadeIn(2500); 
     $(".company").fadeIn(2500); 
    }); 
}); 
</script> 

, 나는 프로젝트 및 회사의 제목 중 하나를 클릭하고 수직 라인과 iwabutton가 289px를 이동할 때 페이드 아웃 할 왼쪽에있는 iwabutton은 100px로 내려 가서 55px로 축소해야하며 현재 페이지가 페이드 아웃되고 다음 페이지가 천천히 페이드 인되어 해당 링크가 열립니다.

<script type="text/javascript"> 
           $(document).ready(function() { 
            $("a.transition").click(function(event){ 
             event.preventDefault(); 
             $("#titlesonly").fadeOut("slow",function(){$("#lineandbutton").animate({right:'289px',"slow",function(){$(#iwabutton").animate({bottom: '-=100px'}, "slow",function(){("#iwanimate").animate({height:'55px',width:'55px'}); 
             linkLocation = this.href; 
             $("body").fadeout("slow",redirectPage); 
             }); 
             function redirectPage() { 
             window.location = linkLocation; 
             } 

             }); 
           </script> 

는 내가 처음으로 효과 권리를 얻었으나, 두 번째 효과는 운동하지 않는 것 다음과 같이

나는 코드를 썼다. 누구든지 나를 도울 수 있습니까? 나는 매우 감사 할 것입니다.

이 코드 조각은 페이지 전환 효과를 올바르게 가져 오지만, verticalline 및 iwabutton을 이동할 수 없습니다.

<script type="text/javascript"> 
           $(document).ready(function() { 
            $("body").css("display", "none"); 

            $("body").fadeIn("slow"); 

            $("a.transition").click(function(event){ 
             event.preventDefault(); 
             linkLocation = this.href; 
             $("body").fadeOut(1000, redirectPage);  
            }); 

            function redirectPage() { 
             window.location = linkLocation; 
            } 
           }); 
           </script> 

Answer 1

.promise().then().then()... 형태로 몬스터 라인을 정리하기, 내가 얻을 : 당신은 지금 pyramid of doom 피하는 관리 가능한 체인을 가지고있어 한

$(document).ready(function() { 
    $("a.transition").click(function(event){ 
     event.preventDefault(); 
     $("#titlesonly").fadeOut("slow").promise(function() { 
      return $("#lineandbutton").animate({right:'289px'}, "slow").promise(); 
     }).then(function() { 
      return $("#iwabutton").animate({bottom: '-=100px'}, "slow").promise(); 
     }).then(function() { 
      return $("#iwanimate").animate({height:'55px', width:'55px'}).promise(); 
     }); 
     var linkLocation = this.href; 
     $("body").fadeOut("slow", function() { 
      window.location = linkLocation; 
     }); 
    }); 
}); 

.

그러나, 나는 당신이 원하는 기대 :

가 작동 여부

$(document).ready(function() { 
    $("a.transition").click(function(event) { 
     event.preventDefault(); 
     var linkLocation = this.href; 
     $("#titlesonly").fadeOut("slow").promise(function() { 
      return $("#lineandbutton").animate({right:'289px'}, "slow").promise(); 
     }).then(function() { 
      return $("#iwabutton").animate({bottom: '-=100px'}, "slow").promise(); 
     }).then(function() { 
      return $("#iwanimate").animate({height:'55px', width:'55px'}).promise(); 
     }).then(function() { 
      return $("body").fadeOut("slow").promise(); 
     }).then(function() { 
      window.location = linkLocation; 
     }); 
    }); 
}); 

는 또 다른 문제이다. 그것은 당신의 HTML/CSS가 얼마나 잘 구성되었는지에 달려 있습니다.