title: How to stop old click event and start a new one
body: <p>Please check out this code: <a href="http://jsfiddle.net/XNnHC/4270/" rel="nofollow noreferrer">http://jsfiddle.net/XNnHC/4270/</a></p>
  
  <pre><code>$(document).ready(function() {
      $("#close-btn").hide();
      var slider_width = $('.pollSlider').width(); //get width automaticly
      $('#pollSlider-button').click(function() {
          if ($(this).css("margin-right") == slider_width + "px" &amp;&amp; !$(this).is(':animated')) {
              $('.pollSlider,#pollSlider-button').animate({
                  "margin-right": '-=' + slider_width
              }); 
              $("#close-btn").hide();
          } else {
              if (!$(this).is(':animated')) //perevent double click to double margin
              {
                  $('.pollSlider,#pollSlider-button').animate({
                      "margin-right": '+=' + slider_width
                  });
                  $("#close-btn").show(500);
                  $("#pollSlider-button").css({
                      'cursor': "default"
                  });
                  // pointer over the close button
                  $("#close-btn").css({
                      'cursor': "pointer"
                  });
              }
          }
     });
  });
  </code></pre>
  
  <p>I am having trouble to figure out how to switch to "close button" in order to be able to animate slider from right to left, after first animation has been completed. Currently close button doesnt have its function, and slider only works if it has been clicked on pollSlider-button, in both ways. I have been digging over the internet, trying methods such as off.unbind('click'),preventDefault and stopPropagation, however I have not accomplished much, I assume I havent put code on the right place. Since I am JS and JQuery beginner, and since I have found this code and have been working on it to adapt it to my own needs, I have realized I dont really know what does this part of the code refer to: "<code>$(this)</code>". I can see that <code>alert($(this).css("margin-right"))</code> returns 0px before and 200px after animation, but I dont understand to what element is connected to. Any explanation would really be appriciated and deeper understanding could lead to soloving issue above.</p>