0 
if($('.click').one('click')){
        $('.click').click(function(){
            $('.mainContent').animate(
                {"height":"+=620px"},
                800,
                'easeInBack');
            $('.eneButton').animate(
                { "top":"+=310px"},
                1500,
                'easeInOutExpo');
            $('.eneButton').animate(
                {"left":"-=310px"},
                1500,
                'easeInOutExpo')
            $('.giardButton').animate(
                {"top":"+=620px"},
                2000,
                'easeInOutExpo')
            $('.giardButton').animate(
                {"left":"-=620px"},
                2000,
                'easeInOutExpo');
            $('.click').off('click');
        })
    }  
    if ($('.close').one('click')){
        $('.close').click(function(){
        $('.content, .sec').fadeOut(250);

            $('.eneButton').animate(
                {"left":"+=310px"},
                1500,
                'easeInOutExpo')
            $('.eneButton').animate(
                { "top":"-=310px"},
                1500,
                'easeInOutExpo');

            $('.giardButton').animate(
                {"left":"+=620px"},
                2000,
                'easeInOutExpo');
            $('.giardButton').animate(
                {"top":"-=620px"},
                2000,
                'easeInOutExpo');

            $('.mainContent').animate(
                {"height":"-=620px"},
                3500,
                'easeInBack');
            $('.click').on('click');
    })

    }

アニメーションは両方の方法で正常に機能していますが、ユーザーがアニメーションを閉じたときにアニメーションを再開できるようにする必要があります。コードからわかるように、ワンクリックでアニメーションが開始され、ウィンドウのように「X」をクリックして閉じることができるカテゴリのリストを選択します。これを行うと、すべてが見えるまでアニメーションが再び開始されます最初のように。もう一度クリックすると、アニメーションが開始されなくなりました。

どんな手掛かり？

4

1 に答える 1

0

私が見つけた解決策はこれです：

$(document).ready(function(){
    $('.click').live('click', function(){
        $('.mainContent').animate(
            {"height":"+=620px"},
            800,
            'easeInBack');
        $('.eneButton').animate(
            { "top":"+=310px"},
            1500,
            'easeInOutExpo');
        $('.eneButton').animate(
            {"left":"-=310px"},
            1500,
            'easeInOutExpo');
        $('.giardButton').animate(
            {"top":"+=620px"},
            1500,
            'easeInOutExpo');
        $('.giardButton').animate(
            {"left":"-=620px"},
            1500,
            'easeInOutExpo');
        //remove the class .click when the animation is done
        //so that the animation, even if you click wont start again
        $('.click').removeClass('click');
    });


$('.close').live('click', function(){
    $('.content, .sec').fadeOut(250)

        $('.giardButton').animate(
            {"left":"+=620px"},
            1500,
            'easeInOutExpo');
        $('.giardButton').animate(
            {"top":"-=620px"},
            1500,
            'easeInOutExpo');

        $('.eneButton').animate(
            {"left":"+=310px"},
            1500,
            'easeInOutExpo');
        $('.eneButton').animate(
            { "top":"-=310px"},
            1500,
            'easeInOutExpo');

        $('.mainContent').animate(
            {"height":"-=620px"},
            2750,
            'easeInBack');
        //Add class .click to #nav ul li so that when the closing animation
        //is done you can restart all from the begin
        $('#nav ul li').addClass('click');
    });
});

ご覧のとおり、.one() 関数を削除して .live() を使用しました。最初のアニメーションの最後に、すべてをアニメーション化する .removeClass('click') でクラスを削除し、最後に最後のアニメーション、最後のアニメーション、すべてが閉じられたら、クラスを $('#nav ul li').addClass('click') で再度追加して、ボタンをクリックするとアニメーションが最初から再開できるようにします.

于 2012-10-25T12:39:10.397 に答える