我想一定的效果加入到我的网页，我不能把我的代码正确

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，然后单击iwabutton以显示项目和公司标题。我得到这个效果正确地把下面的代码放到头部分：

<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()...形式，我得到：

$(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; 
     }); 
    }); 
}); 

你现在得到了一个可管理链，这避免了pyramid of doom。

不过，我想你想：

$(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是如何构建的。