0

我正在开发一个网站。在我的网站上有 5 个菜单。5 个菜单对应于 5 个不同的 html 页面。但它似乎是单页。该属性是通过pjax 插件实现的（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>

调用 pjax 的脚本：

$(function(){
  $('div#header-menu a').pjax('#master-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();             
            });

        });

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

请参考我的网站

请帮忙，谢谢。

4

1 回答 1

1

这是您的菜单点击事件之一的示例。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'); }
于 2013-07-03T04:14:12.803 回答