Jquery 2.0 -在点击时恢复动画

Jquery 2.0 - Reanimate animation on click

本文关键字：恢复 动画 Jquery      更新时间：2023-09-26

我有一点问题。动画工作只是第一次被点击，第二次当它被点击时，它拒绝工作-当我点击右并返回它正在工作，但当我想再次去右它不工作。代码:

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>

当您加载内容时，我猜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');
});
相关文章：