title: Toggle a function on click
body: <p>I am trying to turn on and turn off a function on click - toggle a function. </p>
  
  <p>I want <code>.fly</code> element to not disappear, only the animation should stop and return to its origin. When the button is clicked, the animation should stop. When it's clicked again, the animation starts again. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div class="hobbie-box"&gt;
        &lt;div class="circle-image"&gt;
          &lt;i id="travel" class="fa fa-plane fly"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="circle-text"&gt;
          &lt;p&gt;Travel industry&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;button type="button" class="btn toggle-effects"&gt;Turn off effects&lt;/button&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>     var flyplane = function(){
        setInterval(function() {
          $fly.animate({
              right: '-=50',
              bottom: '+=50'
          }, 2000, function() {
              $fly.removeAttr("style");
          });
      }, 2000);
  };
    flyplane();
  
  
  $(".toggle-effects").on("click", function () {
          $(this).text(function (i, text) {
            return text === "Turn off effects" ? "Turn on effects" : "Turn off effects";
          })
          $("#travel").toggle($fly);
        }); //end of button click
  </code></pre>