Jquery：在导航onclick之前做一些事情

我正在开发一个网站。在我的网站上有5个菜单。5个菜单对应5个不同的html页面。但它似乎是单页的。此属性是通过（pjax将html加载到当前页面而不加载完整页面）实现的

菜单的Html

<div id="header-menu">
  <a href="index.html">
    <div id="logo-container"> 
     <img src="img/logo.png" />         
    </div >
  </a>
<div id="menu-container">
  <a href="whatvdo.html">
    <div id="menu1">         
      <p class="menuitemslb">What we do?</p>        
    </div>
  </a>
  <a href="whovr.html">
    <div id="menu2">    
      <p class="menuitemslb">Who we are?</p>     
    </div>
  </a>
  <a href="howvwork.html">
    <div id="menu3">
      <p class="menuitemslb">How we work?</p>
    </div>
 </a>
 <a href="createnewapp.html">
     <div id="menu4">
       <p class="menuitemslb">Create a project!</p>
     </div>
 </a>
 </div>
</div>

使用以下脚本完成内容div的动画：

jQuery(document).ready(function(){
            $("#contenttotal").css("top", "-100px").animate( { "opacity": "show", "top":"25px"} , "slow" );
            $("#whatvdo").hide();
            $("#createnewapp").hide();
            $("#whovr").hide();
            $("#howvwnew").hide();      

            $("#menu1").click(function(){
                $("#whatvdo").css("top", "-100px").animate( { "opacity": "show", "top":"25px"} , "slow" );  
                $("#contenttotal").hide();          
                $("#createnewapp").hide();  
                $("#whovr").hide();             
                $("#howvwnew").hide();              
            });


            $("#logocontainer").click(function(){
                $("#contenttotal").css("top", "-200px").animate( { "opacity": "show", "top":"0px"} , "slow" );  
                $("#createnewapp").hide();
                $("#whatvdo").hide();   
                $("#whovr").hide(); 
                $("#howvwnew").hide();                              
            });

        $("#menu4").click(function(){
                $("#createnewapp").css("top", "-200px").animate( { "opacity": "show", "top":"0px"} , "slow" );  
                    $("#whatvdo").hide();               
                    $("#contenttotal").hide();      
                    $("#whovr").hide();     
                    $("#howvwnew").hide();              
            });

            $("#menu2").click(function(){
                $("#whovr").css("top", "-200px").animate( { "opacity": "show", "top":"0px"} , "slow" );  
                    $("#whatvdo").hide();               
                    $("#contenttotal").hide();              
                    $("#createnewapp").hide();  
                    $("#howvwnew").hide();              
            });

            $("#menu3").click(function(){
                $("#howvwnew").css("top", "-200px").animate( { "opacity": "show", "top":"0px"} , "slow" );  
                    $("#whatvdo").hide();               
                    $("#contenttotal").hide();              
                    $("#createnewapp").hide();              
                    $("#whovr").hide();             
            });

        });

我的问题是，现在当我点击每个菜单时，当前的content div消失并转到相应的页面。在div消失之前，我想执行一个动画。这怎么可能

请参阅

请帮忙，

---

谢谢。

下面是一个菜单单击事件的示例。要隐藏的元素只有在动画完成并执行

complete

回调后才会隐藏

        $("#menu1").click(function(){
            $("#whatvdo").css("top", "-100px").animate( { 
                 "opacity": "show", 
                 "top":"25px"
               } , {
                 duration: "slow",
                 complete: function() {
                   $("#contenttotal").hide();          
                   $("#createnewapp").hide();  
                   $("#whovr").hide();             
                   $("#howvwnew").hide();              
               }
            });
        });

我注意到您有很多重复的代码，您可以将回调更改为更简单的方式，如：

complete: function() { 
   $("#contenttotal, #createnewapp, #whovr, #howvwnew").hide(); 
}

或创建特定于您的用途的功能：

function hideAllExcept(exception) {
     $("#whatvdo, #contenttotal, #createnewapp, #whovr, #howvwnew")
       .not( + exception + ).hide(); 
}

// in animate:
complete: function() { hideAllExcept('#whatvdo'); }

---

回调函数可能会解决您的问题。我猜您必须弄清楚如何在没有插件的情况下加载内容以使其与动画一起工作，除非插件以某种方式支持动画（不知道pjax）。抱歉，我不清楚。我的意思是，当在导航之前单击下一个菜单时，我想对当前content div执行另一个动画？

function hideAllExcept(exception) {
     $("#whatvdo, #contenttotal, #createnewapp, #whovr, #howvwnew")
       .not( + exception + ).hide(); 
}

// in animate:
complete: function() { hideAllExcept('#whatvdo'); }