javascript - How do I unbind and rebind on() click animations? -

I have a recursive loop that makes a simple animation controlled by these animation page loads & amp; Click .corousel_item of the control.

Snatched down for simplicity purposes

Problem: Repeat click on the same control But the animation will fire more and I will only have to burn the animation per copy carousel_item every time.

UPDATE I will only burn the animation to carousel_item every time. And when the following carousel_item is clicked, then Reset.

Example: Pushing repeatedly the animation will be triggered repeatedly. I want to first press the trigger to trigger the animation. Next user 2 mashes This will retrieve the animation once and will not repeat the user still can still push for mash 1 time, I want to stop it

Logically, I myself And click on another .corousel_item to reboot itself; This is my argument; However, I'm sure the better solution is

  var carItems = $ ('.corousel_item'); Var sideitems = $ ('. Side_item'); Var x = false; $ (Sideitems) .hide (); FadeItem (); $ (CarItems) .on ({click: function () {$ (sideitems). Stop (true, true). Value ({right: '4.5em'}); $ (sideitems) .hide (); fadeItem ( );}, Mouseenter: function () {}, mouseleave: function () {}}); Function Fadeim () {$ ('. Side_Le Lee: Hidden: First'). Feedin (Feldim). Value ({true: '4.5em'}, 150, function () {}) ;; }a????   
  HTML     & lt; Div id = "carousel" class = "flexslider" & gt; & Lt; Ul class = "slide" & gt; & Lt; Li class = "carousel_item" & gt; & Lt; Img src = "asset / img / 1600 / slide 1_1600.jpg" /> & Lt; / Li & gt; & Lt; Li class = "carousel_item" & gt; & Lt; Img src = "asset / img / 1600 / slide 2_1600.jpg" /> & Lt; / Li & gt; & Lt; Li class = "carousel_item" & gt; & Lt; Img src = "asset / img / 1600 / slide 1_1600.jpg" /> & Lt; / Li & gt; & Lt; Li class = "carousel_item" & gt; & Lt; Img src = "asset / img / 1600 / slide 2_1600.jpg" /> & Lt; / Li & gt; & Lt ;! - Item Twice, Total 12 - & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Nav class = "side_nav" & gt; & Lt; Ul class = "side_ul" & gt; & Lt; Li class = "side_item home" & gt; & Lt; Div class = "text_links" & gt; & Lt; A href = "#" & gt; Home & lt; / A & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; Li class = "side_item document" & gt; Div class = "text_link" & gt; & Lt; A href = "#" & gt; Docs & lt; / A & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; Li class = "side_item video" & gt; Div class = "text_links" & gt; & Lt; A href = "#" & gt; Video & lt; / A & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; Li class = "side_item programming" & gt; Div class = "text_links" & gt; & Lt; A href = "#" & gt; Web & lt; / A & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt;   
    <  You can close  after the click event; & Amp;  $ (this)  will set to be set to  off  for that particular item.  
 Good read:  
 Hope that helps,  :)   
  code   
  $ (carItems) .on ({click: function () {$ (Syndication). Stop (True, True). Sammet ({true: '4.5 m}}; $ (Syndication). Hyde (); Feideum (); $ (this) .off ('click');}, mouseenter: function () {}, mouseleave: function () {}});