Animate an added event but not a dropped one

Question

I'm using FullCalendar to display some events on my app. I want to use some css animations from animate.css when some event is added on the calendar. For this, I pass to the fullCalendar:

eventRender: function(ev,elm){
    $(elm).addClass("animated bounce");                
}

And the event bounces beautifully. The problem is the eventRender is called for every event everytime an event is dragged, so when I drag a specific event, all others bounce too :/ In fact, I would like to be able to animate the events only the first time I load them and not when dragging/dropping. So, since the eventRender does not know why he is re-rendering all events, is there some other way to animate the them?

Here is an example showing the problem: http://jsfiddle.net/5H2CS/

Answer 1

It took me a bit to figure this one out, as I have not worked with fullcalendar in a long time, but here is something you can use: http://jsfiddle.net/5H2CS/12/

// track whether the element has been dropped inside the event fetcher:
...
  var eventObject = {
            title: $.trim($(this).text()), // use the element's text as the event title
            dropped: 0
        };
...

// in the renderer callback: if event has not been dropped yet, animate it
// and then, set the dropped status to 1
eventRender: function(e, elm){
            if (e.dropped == 0) {
               $(elm).addClass("animated bounce");
               e.dropped = 1;
            }
        },
...

works like a charm :)