title: How to bind transition end event to multiple elements without having multiple executions of the function?
body: <p>I have a list which contains images and I move them with a css transition.</p>
  
  <p>Because those images are big, I have to use css transition on the list elements to avoid a flicker on Safari.</p>
  
  <pre><code>&lt;ul id="container"&gt;
      &lt;li class="moveLeft&gt;...&lt;/li&gt;
      &lt;li class="moveLeft"&gt;...&lt;/li&gt;
      &lt;li class="moveLeft&gt;...&lt;/li&gt;
      &lt;li class="moveLeft&gt;...&lt;/li&gt;
      &lt;li class="moveLeft&gt;...&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The problem is that the function binded to the transition end is executed 5 times (the amount of elements) if I use bind on the ul element :</p>
  
  <pre><code>$("container").bind("webkitTransitionEnd", function() {
      doSomething()
  });
  </code></pre>
  
  <p>I tried to bind the event handler on the second children of the list, but because <strong>list elements are updated (elements deleted, added)</strong>, the event handler will stop when the second element will be replaced.</p>
  
  <pre><code>$("container").children().eq(2).bind("webkitTransitionEnd", function() {
      doSomething()
  });
  </code></pre>
  
  <p>I think the solution is to bind the event handler to the parent, but how could I do to execute the function one time instead of five each time the event is fired ?</p>