title: Changing images in jQuery
body: <p>I am trying to make the image change when clicking an li element, in the sense that it would move back up to the navigator bar and then move back down with another image as background! The thing is that with my code the image changes before it moves back up (so basically the image changes too early), and I'm not sure how to fix it...</p>
  
  <p>Here is my jQuery</p>
  
  <pre><code>var click = false;
  
  $("#1").mouseenter(function(){
      $("#1 span.indicator").css("color", "#ffa1d4");
  });
  
  $("#1").on("click",function(){
      if (click = false){
      var click = true;
      }
      else {
          var click = false;
          $("div.container").animate({height: '0%'});
          $("div.container").animate({width: '500px'});
      }
      $("div.container").css("background-color", "#faf4fc");
      $("div.container").css("background-image","url(images/1.jpg)");
      $("div.container").animate({height: '100%'});
      $("div.container").animate({width: '100%'});
      document.getElementById('title').innerHTML = "1";
  });
  
  $("#1").mouseleave(function(){
      $("#1 span.indicator").css("color", "#a187be");
  });
  
  $("#2").mouseenter(function(){
      $("#2 span.indicator").css("color", "#ffa1d4");
  });
  
  $("#2").on("click",function(){
      if (click = false){
      var click = true;
      }
      else {
          var click = false;
          $("div.container").animate({height: '0%'});
          $("div.container").animate({width: '500px'});
      }
      $("div.container").css("background-color", "#faf4fc");
      $("div.container").css("background-image","url(images/2.jpg)");
      $("div.container").animate({height: '100%'});
      $("div.container").animate({width: '100%'});
      document.getElementById('title').innerHTML = "2";
  });
  
  $("#2").mouseleave(function(){
      $("#2 span.indicator").css("color", "#a187be");
  });
  </code></pre>
  
  <p>I hope that is a bit clear ;;</p>