单击时运行功能，第二次单击时将其反转

Question

我有一些动画在屏幕外显示，此刻在刷新页面后立即运行。 单击汉堡图标时，我需要调用函数。 然后，当图标打开并再次单击时，我希望如果可能的话，将功能反转，第一个字符（C）首先返回。

 jQuery("#button").click(function() { jQuery(".line1").toggleClass("open1"); jQuery(".line2").toggleClass("open2"); jQuery(".line3").toggleClass("open3"); }); (function text_loop(i) { setTimeout(function() { if (i <= 15) $("#logo_text span").eq(i).addClass("slide_out"); i++; text_loop(i); }, 100); })(0); 

 #burger_container { background-color: #404041; display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 60px; z-index: 101; } svg { margin: 20px auto 0 auto; display: block; } #logo_text { transform: rotate(-90deg); margin-top: 350px; font-size: 40px; color: #ffffff; font-weight: 700; } #logo_text span { font-weight: 400; position: relative; top: 0; transition: top 1s ease; } #logo_text span.slide_out { top: -60px; transition: top 0.5s ease; } .line1, .line2, .line3 { transition: all 0.3s ease; } .open1 { transform-origin: top left; transform: translatex(3px) translatey(-1px) rotate(45deg); width: 33px; } .open2 { opacity: 0; } .open3 { transform-origin: bottom left; transform: translatex(3px) translatey(1px) rotate(-45deg); width: 33px; } 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <div id="burger_container"> <div> <svg id="button" style="height: 26px; width: 26px;"> <g style="" fill="#f04d43"> <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" /> <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" /> <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" /> </g> </svg> <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div> </div> </div> 

Answer 1

调用它为函数，并且您的setTimeout不会在if语句中将其结束大括号内包装

 jQuery("#button").click(function() { jQuery(".line1").toggleClass("open1"); jQuery(".line2").toggleClass("open2"); jQuery(".line3").toggleClass("open3"); var currentClass = $("#logo_text span").eq(0).attr('class'); if(currentClass === undefined || currentClass == "slide_in") { text_loop(0, 'slide_out'); } else { text_loop(0, 'slide_in'); } }); function text_loop(i, classname) { setTimeout(function() { if(i <= 15) { $("#logo_text span").eq(i).attr('class', classname); i++; text_loop(i, classname); } }, 100); } 

 #burger_container { background-color: #404041; display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 60px; z-index: 101; } svg { margin: 20px auto 0 auto; display: block; } #logo_text { transform: rotate(-90deg); margin-top: 350px; font-size: 40px; color: #ffffff; font-weight: 700; } #logo_text span { font-weight: 400; position: relative; top: 0; transition: top 1s ease; } #logo_text span.slide_out { top: -60px; transition: top 0.5s ease; } #logo_text span.slide_in { top: 0px; transition: top 0.5s ease; } .line1, .line2, .line3 { transition: all 0.3s ease; } .open1 { transform-origin: top left; transform: translatex(3px) translatey(-1px) rotate(45deg); width: 33px; } .open2 { opacity: 0; } .open3 { transform-origin: bottom left; transform: translatex(3px) translatey(1px) rotate(-45deg); width: 33px; } 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <div id="burger_container"> <div> <svg id="button" style="height: 26px; width: 26px;"> <g style="" fill="#f04d43"> <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" /> <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" /> <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" /> </g> </svg> <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div> </div> </div> 

Answer 2

我对您的代码进行了一些更改，以处理所需的行为。

 jQuery("#button").click(function() { jQuery(".line1").toggleClass("open1"); jQuery(".line2").toggleClass("open2"); jQuery(".line3").toggleClass("open3"); if(jQuery("#button").data("shown") == "True"){ (function text_loop(i) { setTimeout(function() { if (i <= 15) $("#logo_text span").eq(i).removeClass("slide_in"); $("#logo_text span").eq(i).addClass("slide_out"); i++; text_loop(i); }, 100); })(0); jQuery("#button").data("shown", "False") }else { (function text_loop(i) { setTimeout(function() { if (i <= 15) $("#logo_text span").eq(i).removeClass("slide_out"); $("#logo_text span").eq(i).addClass("slide_in"); i++; text_loop(i); }, 100); })(0); jQuery("#button").data("shown", "True") } }); 

 #burger_container { background-color: #404041; display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 60px; z-index: 101; } svg { margin: 20px auto 0 auto; display: block; } #logo_text { transform: rotate(-90deg); margin-top: 350px; font-size: 40px; color: #ffffff; font-weight: 700; } #logo_text span { font-weight: 400; position: relative; top: 0; transition: top 1s ease; } #logo_text span.slide_out { top: -60px; transition: top 0.5s ease; } #logo_text span.slide_in { top: 0px; transition: top 0.5s ease; } .line1, .line2, .line3 { transition: all 0.3s ease; } .open1 { transform-origin: top left; transform: translatex(3px) translatey(-1px) rotate(45deg); width: 33px; } .open2 { opacity: 0; } .open3 { transform-origin: bottom left; transform: translatex(3px) translatey(1px) rotate(-45deg); width: 33px; 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <div id="burger_container"> <div> <svg id="button" style="height: 26px; width: 26px;" data-shown="True" > <g style="" fill="#f04d43"> <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" /> <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" /> <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" /> </g> </svg> <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div> </div> </div> 

如您所见，我更改了onclcik事件处理程序中的代码。 我在css中添加了一个名为slide_in的新类。

希望我的回答对您有所帮助。