0

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

<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>

现在，当我单击带有 class="click" 的 div 时，您如何看到一个动画和一个子类别窗口在侧面打开，这个窗口有其他链接可以打开各种内容，每个内容都有一个“X”按钮关闭窗口并在原始位置重新设置 div class="click" 的动画。问题从这里开始，如果我再次单击 class="click" 动画就不会再发生了，但只有侧面的窗口出现了 sub-categories 。知道如何重新启用 class="click" 以便我可以重新启动第一个动画吗？

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

谢谢你

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

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

于 2012-10-25T07:48:51.050 回答