title: jQuery flag animation on click
body: <p>I'm trying to make a program where there's a flag next to a pole. It starts out at the bottom of the pole, and when the user clicks on it, it moves to the top of the pole. When it's at the top, if the user clicks on it again, it moves to the bottom. So I am trying to make that flag effect. But right now with what I have the first part's working, where it moves up. But the moving down part is not. Can someone help? Thanks.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src = &quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;. 
          &lt;/script&gt;
     &lt;/head&gt;
    &lt;body&gt;
         &lt;img src = &quot;https://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Us_flag_large_38_stars.png/1200px-Us_flag_large_38_stars.png&quot; id = &quot;flag&quot; width = &quot;200px&quot; height = &quot;140px&quot;&gt;
         &lt;div id = &quot;pole&quot;&gt;&lt;/div&gt;
      
       &lt;script&gt;
          //booleans
          var reachedTop = false;
          var reachedBottom = true;
          
          //initial positioning
          $(&quot;#pole&quot;).width(10);
          $(&quot;#pole&quot;).height($(document).height());
          $(&quot;#pole&quot;).css(&quot;background-color&quot;, &quot;gray&quot;);
          $(&quot;#pole&quot;).css({left: $(document).width() * 5/12});
          $(&quot;#pole&quot;).css(&quot;position&quot;, &quot;absolute&quot;);
          
          $(&quot;#flag&quot;).css(&quot;position&quot;, &quot;absolute&quot;);
          $(&quot;#flag&quot;).css({left: $(&quot;#pole&quot;).position().left, top: $(document).height()/3});
          
          //animations on clicks
          if (reachedBottom &amp;&amp; reachedTop == false){
              $(&quot;#flag&quot;).click(function(){
                
                  $(&quot;#flag&quot;).animate({top: $(&quot;#pole&quot;).position().top});
                  if ($(&quot;#flag&quot;).position().top == $(&quot;#pole&quot;).position().top){
                      reachedTop = true;
                      reachedBottom = false;
                  }
              });
          } else if (reachedTop &amp;&amp; reachedBottom == false){
              $(&quot;#flag&quot;).click(function(){
                  $(&quot;#flag&quot;).animate({top: $(document).height()/3});
                  if ($(&quot;#flag&quot;).position().top == $(document).height()/3){
                      reachedTop = false;
                      reachedBottom = true;
                  }
              });
          }
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>