2013-05-13 42 views
0

我有点问题。动画只是第一次点击工作,第二次点击时,它是拒绝工作 - 当我点击右后方它正在工作,但是当我想再次合适时,它不起作用。代码:Jquery 2.0 - 点击复活动画

var main_container = $('.main_container'), 
menu = $('.home_navigation_text'), 
second_page = main_container.find('.second_page'), 
body_width = $(window).width(); 

menu.hover(
     function(){ 
      var $this = $(this), 
      page = $this.find('a').attr('href'); 
      second_page.empty().load(page); 
      }, 
     function(){ 

     } 
    ); 

menu.on('click', function(e){ 
    main_container.animate({ 
    right: '+=' + body_width 
    }, 600, 'linear', function() { 
    go_back(); 
    }); 
    return false; 
}); 

function go_back() 
{ 
    var back = second_page.find('.back'); 
    back.on('click', function(e){ 
     main_container.animate({ 
     left: '+=' + body_width 
     }, 600, 'linear', function() { 
    }); 
     return false; 
    }); 
} 

HTML代码:

<div class="main_container clearfix"> 
    <section class="home_page clearfix"> 
     <header class="home_header container"> 

      <div class="grid_3 alpha omega" id="home_logo"> 
       <img class="" src="<?php echo IMG ?>resources/jbs_cc_logo.png" alt="JBS Logo"> 
      </div> 
      <div class="grid_9 alpha omega"> 

      </div> 

     </header> 
     <!-- END OF HEADER --> 

     <div class="home_main container"> 
      <nav class="home_navigation clearfix"> 
       <ul class="clearfix"> 
        <?php foreach ($menu as $mn): ?> 
         <li class="home_navigation_text"> 
          <a class=home_navigation_link href="<?php echo base_url($mn['slug']) ?>"><?php echo $mn['title'] ?></a> 
         </li> 
        <?php endforeach ?> 
       </ul> 
      </nav> 
     </div> 

    </section> 
    <section class="second_page"> 

    </section> 
</div> 

回答

1

当你加载的内容,我猜menu以某种方式被替换,是因为这样的动态。委托main_container可能会工作,但很难说,因为没有标记,我不知道它看起来如何?

var main_container = $('.main_container'), 
    second_page = main_container.find('.second_page'), 
    body_width  = $(window).width(); 

main_container.on({ 
    mouseenter: function() { 
     second_page.empty().load($(this).find('a').attr('href')); 
    }, 
    click: function(e) { 
     e.preventDefault(); 
     main_container.animate({ 
      right: '+=' + body_width 
     }, 600, 'linear'); 
    } 
}, '.home_navigation_text'); 


main_container.on('click', '.back', function(e){ 
    e.preventDefault(); 
    main_container.animate({ 
     right: '-=' + body_width 
    }, 600, 'linear'); 
}); 
+0

我已添加HTML代码。菜单从不被替换,它从屏幕上移开。编辑的代码正在工作:)。谢谢你的帮助:) – Sasha 2013-05-13 15:25:17

+0

@Sasha - 不客气? – adeneo 2013-05-13 15:28:40

+0

为什么是问号? :D – Sasha 2013-05-13 15:31:19