CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Reece
Reece

Reputation: 2711

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

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>

Upvotes: 0

Views: 174

Answers (2)

ewwink
ewwink

Reputation: 19184

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>

Upvotes: 2

thibaud P.
thibaud P.

Reputation: 26

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.

Upvotes: 1

Related Questions