Question

$(document).ready(function(){ 
    $('#Wrapper').click(function (){ 
        setTimeout(function(){ 
            $('#Article_1').toggleClass('magictime perspectiveDown'); 
        }, 1000);
        setTimeout(function(){ 
            $('#fold12').toggleClass('magictime perspectiveDown'); 
        }, 2000); 
        setTimeout(function(){ 
            $('#fold123').toggleClass('magictime perspectiveDown'); 
        }, 3000);
   }
});

我有这个jQuery代码可以正常工作。当我第一次点击包装纸时，它会从上到下折叠。我想要的是当我点击包装器但向上，即从下到上时，同一动画再次重复。

我正在使用https://github.com/miniMAC/magic

我该怎么做？建议改进动画也很受欢迎。

Answer 1

我认为您需要存储一个包含#Wrapper的标记，以便您知道调用动画的方式，可能仅在某些data()中。然后，如果设置了标志，则需要反转顺序。你可以简化这一点，避免只是通过将元素存储在一个数组中并循环遍历它来计算超时和动画顺序来复制粘贴所有内容：

<强>更新

正如Chirag暗示的那样，你还需要使用perspectiveDownRetourn，这样折叠动画就可以了。在应用magictime之前，您需要在开始时将其应用于元素，最好是在HTML中，因此它们不会在开始时折叠。然后在代码中，切换perspectiveDown 和 perspectiveDownRetourn：

$(document).ready(function(){ 

    // add perspectiveDownRetourn before magictime to avoid perspectiveDownRetourn playing at the start
    var articles = $("#Article_1, #fold12, #fold123").addClass('perspectiveDownRetourn');
    window.setTimeout(function() { articles.addClass('magictime'); }, 100);

    $('#Wrapper').data('showing', false).click(function () {
        var $this = $(this);
        var flag = $this.data('showing')

        var elems = ["#Article_1", "#fold12", "#fold123"];
        // if showing, reverse the display order
        if(flag) {
            elems.reverse();
        }

        // reverse the flag
        $this.data('showing', !flag);

        // loop elements and toggle both the down and up animations
        for(var i = 0; i < elems.length; i++) {
            setTimeout(function(){
                this.toggleClass('perspectiveDown perspectiveDownRetourn'); 
            }.bind($(elems[i]), flag), (i + 1) * 1000);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://minimamente.com/example/magic_animations/css/magic.min.css" rel="stylesheet"/>

<button id="Wrapper">Click Me</button>

<div id="Article_1" class="">Article 1</div>
<div id="fold12" class="">Fold 12</div>
<div id="fold123" class="">Fold 123</div>

根据您的小提琴，以下是完整的代码

<!DOCTYPE html>
<HTML>
	<HEAD>


		<TITLE>Two Column Layout</TITLE>
<script 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://minimamente.com/example/magic_animations/css/magic.min.css" rel="stylesheet"/>


		
		


                  <script src="jquery.js"></script>
                  <script src="dist/animatecss.min.js"></script>
<link href="css/hover.css" rel="stylesheet" media="all">


  <style type="text/css">
    SECTION#Wrapper {
                 
	float: left;
	width: 700px;
	height: 1400px;
	margin-top: 5px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 50px;
}

ARTICLE#Article_1 {
	width: 730px;
	height: 300px;
	background-color: #ADAAAA;
}

HEADER#Header_Article_1 {
	width: 730px;
	height: 60px;
	background-color: #DCDCDC;
}

SECTION#Section_Article_1 {
	width: 680px;
	height: 200px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	background-color: #F8EBEB;
}

ARTICLE#Article_2 {
	width: 730px;
	height: 300px;
	background-color: #ADAAAA;
}

HEADER#Header_Article_2 {
	width: 730px;
	height: 60px;
	background-color: #DCDCDC;
}

SECTION#Section_Article_2 {
	width: 680px;
	height: 200px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	background-color: #F8EBEB;
}


ARTICLE#Article_3 {
	width: 730px;
	height: 300px;
	background-color: #ADAAAA;
}

HEADER#Header_Article_3 {
	width: 730px;
	height: 60px;
	background-color: #DCDCDC;
}

SECTION#Section_Article_3 {
	width: 680px;
	height: 200px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	background-color: #F8EBEB;
}



ARTICLE#Article_4 {
	width: 730px;
	height: 300px;
	background-color: #ADAAAA;
}

HEADER#Header_Article_4 {
	width: 730px;
	height: 60px;
	background-color: #DCDCDC;
}

SECTION#Section_Article_4 {
	width: 680px;
	height: 200px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	background-color: #F8EBEB;
}

    </style>

                     </HEAD>


	<BODY>
		

		
		


		<SECTION ID="Wrapper">



 <div id="fold123">
         <div id="fold12">

			<ARTICLE ID="Article_1">
				<HEADER ID="Header_Article_1">
					<H2>Article One Title</H2>
				</HEADER>

				<SECTION ID="Section_Article_1">
					<P>The contents of this section go here.</P>
				</SECTION>

			</ARTICLE>

             
			<ARTICLE ID="Article_2">
				<HEADER ID="Header_Article_2">
					<H2>Article Two Title</H2>
				</HEADER>

				<SECTION ID="Section_Article_2">
					<P>The contents of this section go here.</P>
				</SECTION>


                                                </ARTICLE>
                                   </div>
                                     
                   
			<ARTICLE ID="Article_3">
				<HEADER ID="Header_Article_3">
					<H2>Article Three Title</H2>
				</HEADER>

				<SECTION ID="Section_Article_3">
					<P>The contents of this section go here.</P>
				</SECTION>

			</ARTICLE>
                                            </div>

                                               <ARTICLE ID="Article_4">
				<HEADER ID="Header_Article_4">
					<H2>Article Four Title</H2>
				</HEADER>

				<SECTION ID="Section_Article_4">
					<P>The contents of this section go here.</P>
				</SECTION>

			</ARTICLE>


                    

		</SECTION>

    	<FOOTER>
      		<P>Your footer content here</P>
            
    	</FOOTER>

      <script type="text/javascript">
      $(document).ready(function(){ 

        // add magictime here to avoid perspectiveDownRetourn playing at the start
        var articles = $("#Article_1, #fold12, #fold123").addClass('perspectiveDownRetourn');
        window.setTimeout(function() { articles.addClass('magictime'); }, 100);

        $('#Wrapper').data('showing', false).click(function () {
            var $this = $(this);
            var flag = $this.data('showing')

            var elems = ["#Article_1", "#fold12", "#fold123"];
            // if showing, reverse the display order
            if(flag) {
                elems.reverse();
            }

            // reverse the flag
            $this.data('showing', !flag);

            // loop elements and toggle both the down and up animations
            for(var i = 0; i < elems.length; i++) {
                setTimeout(function(){
                    this.toggleClass('perspectiveDown perspectiveDownRetourn'); 
                }.bind($(elems[i]), flag), (i + 1) * 1000);
            }
        });
    });
        </script>
      
  </BODY>
</HTML>

单击同一元素时如何反转动画

1 个答案: