Running a function on click and reversing it on the second click

Question

I have some text that animates off screen, at the moment this runs as soon as the page is refreshed. I need to function to be called when the burger icon is clicked. Then when the icon is open and clicked again I want the function to be reversed if possible with the first character (C) coming back in first.

 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

call it as function and your setTimeout will not end wrap it inside curly bracket in if statement

 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

I made some changes in your code to handle the behavior you want.

 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> 

As you can see i changed the code in the onclcik event handler. and i added a new class in css named slide_in.

Hope my answer will help you.