單擊時運行功能，第二次單擊時將其反轉

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的新類。

希望我的回答對您有所幫助。