 <p>using a little set time out magic though i found the solution : </p> <pre><code>$('#myTab').on('click' , 'li a' , function(){ $this = $(this); var str_href = $this.attr('href'); str_image = str_href + ' ' + 'img'; str_contentdiv = str_href + ' ' + '.add-animation'; setTimeout(function(){ $(str_image).addClass('animated bounceInLeft'); $(str_contentdiv).addClass('animated bounceInRight'); setTimeout( function(){ $(str_image).removeClass('animated bounceInLeft'); $(str_contentdiv).removeClass('animated bounceInRight'); }, 2000); }, 100); }); </code></pre> <p>note : to the col-md-5 that i add the animated bounceInRight class i also add the class <code>add-animation</code> as a hook , could have used a css selector , but never mind . </p> <p><strong>Drawback of this method</strong> : if the user turns out to be click maniac , the animations will not show .. because well thats the way setTimeout works :D </p> <p>have a nice day guys . YOLO . </p> <p>any suggestions ? are very very welcome. </p>