Question

我正在开发一个网站。在我的网站上有5个菜单。 5个菜单对应五个不同的html页面。但它似乎是单页。此属性由pjax plugin实现（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消失之前，我想要执行动画。怎么可能？

请参阅my site

请帮忙，谢谢。

Answer 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'); }

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

1 个答案: