Question

大家好我已经写了这段代码

<script>


            //animate 2 div while clicked on one of the three
    $(document).ready(function(){
        $('.click').one("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');
                            //turn the close button on
            $('close').on('click');
                            //disable the .click button
            $('.click').off('click');
        });
    });



            //close a div and start animation 
    $('.close').one("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"},
                3500,
                'easeInBack');
                            //turn the .click button on
            $('.click').on('click');
                            //turn the close button off 
            $('.close').off('click');
        });



    //animate the first windows with sub-categories while press the .click button
    $(document).ready(function(){
        $('#riscaldamento li.cont').one("click", function(){
            $('#riscaldamento li.cont').css({'float':'left', 'margin':'5px'});
            $('.content #riscaldamento').animate(
                {"height":"50px", "padding":"30px"},
                1500
            );
        })

        $('#energie li.cont').one("click", function(){
            $('#energie li.cont').css({'float':'left', 'margin':'5px'});
            $('.content #energie').animate(
                {"height":"50px", "padding":"30px"},
                1500
            );
        })

        $('#giardinaggio li.cont').one("click", function(){
            $('#giardinaggio li.cont').css({'float':'left', 'margin':'5px'});
            $('.content #giardinaggio').animate(
                {"height":"50px", "padding":"30px"},
                1500
            );
        })
    });



    //open new windows with the content of every sub-categories
    $(document).ready(function(){
        $('#riscButton').click(function(){
            $('#energie, #giardinaggio, .ene, .ris, .gia').slideUp(1500);
            $('#riscaldamento').delay(100).slideDown('easeOutBounce');
            $('.cont').css({'height':'auto'});
        });
        $('#eneButton').click(function(){
            $('#riscaldamento, #giardinaggio, .ene, .ris, .gia').slideUp(1500);
            $('#energie').delay(100).slideDown('easeOutBounce');
            $('.cont').css({'height':'auto'});
        });
        $('#giardButton').click(function(){
            $('#energie, #riscaldamento, .ene, .ris, .gia').slideUp(1500);
            $('#giardinaggio').delay(100).slideDown('easeOutBounce');
            $('.cont').css({'height':'auto'});
        });
    });
    //click menu secondario per contenuto secondario riscaldamento
    $(document).ready(function(){
        $('#risCont').click(function(){
            $('.ris, .ene, .gia').fadeOut(50);
            $('#secRisc').delay(200).fadeIn(500);
        })
        $('#risCont1').click(function(){
            $('.ris, .ene, .gia').fadeOut(50);
            $('#secRisc1').delay(200).fadeIn(500);
        })
        $('#risCont2').click(function(){
            $('.ris, .ene, .gia').fadeOut(50);
            $('#secRisc2').delay(200).fadeIn(500);
        })
        $('#risCont3').click(function(){
            $('.ris, .ene, .gia').fadeOut(50);
            $('#secRisc3').delay(200).fadeIn(500);
        })
        $('#risCont4').click(function(){
            $('.ris, .ene, .gia').fadeOut(50);
            $('#secRisc4').delay(200).fadeIn(500);
        })

    });
    //click menu secondario per contenuto secondario energie
    $(document).ready(function(){
        $('#eneCont').click(function(){
            $('#secEne1, #secEne2, .ris, .gia').fadeOut(50);
            $('#secEne').delay(200).fadeIn(500);
        })
        $('#eneCont1').click(function(){
            $('#secEne, #secEne2, .ris, .gia').fadeOut(50);
            $('#secEne1').delay(200).fadeIn(500);
        })
        $('#eneCont2').delay(200).click(function(){
            $('#secEne1, #secEne, .ris, .gia').fadeOut(50);
            $('#secEne2').fadeIn(500);
        })
    });
    //click menu secondario per contenuto secondario giardini e piscine
    $(document).ready(function(){   
        $('#giaCont').click(function(){
            $('#secGia1, .ris, .ene').fadeOut(50);
            $('#secGia').delay(200).fadeIn(500);
        })
        $('#giaCont1').click(function(){
            $('#secGia, .ris, .ene').fadeOut(50);
            $('#secGia1').delay(200).fadeIn(500);
        })
    });
        //Nascondo i secondi menu
        $('#riscaldamento,#energie,#giardinaggio').hide();

        //nascondo i contenuti
        $('.ene, .ris, gia').hide();

        //Nascondo i contenuti energie
        $('#secEne,#secEne1,#secEne2').hide();

        //nascondo i contenuti giardini
        $('#secGia, #secGia1').hide();

        //nascondo il noscript
        $('.noscript').hide();
    </script>

现在，当我点击div与class =“click”动画发生并且侧面打开子类别窗口时，你如何看到这个窗口有其他链接打开各种内容，每个内容都有一个“ X“按钮关闭窗口并在原始位置重新设置div class =”click“的动画。问题从这里开始，如果我再次点击class =“click”动画不再发生，但只有侧面的windws出现在子类别中。任何想法如何reable class =“click”，以便我可以重新启动第一个动画？

这是您可以测试动画的链接 http://satidrotermica.com

在前言中感谢你

Answer 1

好的我找到的解决方案就是：

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

正如你在第一个动画结束时看到的那样，我删除了动画全部动作的类，并在最后一个动画结束时，关闭一个，当一切都关闭时，我再次在DOM添加类#nav ul我可以重新点击按钮，动画可以从头开始。

启动，停止并重新启动

1 个答案: