Question

我有点问题。动画工作只是第一次点击，第二次点击它，它拒绝工作 - 当我点击正确和返回时它正在工作，但当我想再次正确时它不起作用。代码：

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>

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

Jquery 2.0 - 点击时恢复动画

1 个答案: