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

    }

动画在两种方式上都可以正常工作，但我需要用户可以在动画关闭时再次重新启动动画。正如您从代码中看到的那样，您单击一次并开始动画，然后您选择一个类别列表，您可以像在 Windows 中一样单击“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 回答