javascript - bootstrap animationing tab contents script -

hey guys using bootstrap tabs component in 1 of projects , wanted add animations bootstrap tabs , below html code :

<ul class="nav nav-tabs" id="mytab">                 <li class="active"><a href="#sectiona">general fitness</a></li>                 <li><a href="#sectionb">cardio</a></li>                 <li><a href="#sectionc">weight training</a></li>                 <li><a href="#sectiond">weight loss</a></li>             </ul>             <div class="tab-content">                 <div id="sectiona" class="tab-pane fade in active">                     <div class="container">                         <div class="row">                             <div class="col-md-offset-1 col-md-5 clearfix">                                 <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right animated bounceinleft">                             </div>                             <div class="col-md-5 animated bounceinright" >                                 <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. delectus eligendi odit aspernatur asperiores quia laudantium porro velit. eligendi neque, quos quo @ eos earum qui harum, temporibus dolore laboriosam aperiam.</p>                              </div>                         </div>                     </div>                 </div>                 <div id="sectionb" class="tab-pane fade">                     <div class="container">                         <div class="row">                             <div class="col-md-offset-1 col-md-5 clearfix">                                 <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">                             </div>                             <div class="col-md-5" >                                 <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. delectus eligendi odit aspernatur asperiores quia laudantium porro velit. eligendi neque, quos quo @ eos earum qui harum, temporibus dolore laboriosam aperiam.</p>                      </div>                 </div>             </div>         </div>         <div id="sectionc" class="tab-pane fade">             <div class="container">                 <div class="row">                     <div class="col-md-offset-1 col-md-5 clearfix">                         <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">                     </div>                     <div class="col-md-5" >                         <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. delectus eligendi odit aspernatur asperiores quia laudantium porro velit. eligendi neque, quos quo @ eos earum qui harum, temporibus dolore laboriosam aperiam.</p>                      </div>                 </div>             </div>         </div>         <div id="sectiond" class="tab-pane fade">             <div class="container">                 <div class="row">                     <div class="col-md-offset-1 col-md-5 clearfix">                         <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">                     </div>                     <div class="col-md-5" >                         <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. delectus eligendi odit aspernatur asperiores quia laudantium porro velit. eligendi neque, quos quo @ eos earum qui harum, temporibus dolore laboriosam aperiam.</p>                      </div>                 </div>             </div>         </div>     </div> 

now works fine , notice how adding animation <img> , 2nd <div class="col-md-5"> .

below script wrote animations apply , everytime tab clicked :

jquery script :

$('#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';        $(str_image).removeclass('animated bounceinleft');       $(str_contentdiv).removeclass('animated bounceinright');        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);    }); 

its short , sweet , problem removal of class settimeout function takes 2 secound , means if user turns out click maniac , animations won't run , reason , can't lover 2 secounds rule , animation runs 2 secound .

i grateful if can me join missing peice here , i.e. how make animations appear everytime tab clicked ??

thank you.

alexander.

add event lister on element animationend/transitionend events first obtain transition end name prefix. (use modernizr or read this article implement logic without modernizr obtain event name prefix)

var transendeventnames = {     'webkittransition' : 'webkittransitionend',// saf 6, android browser     'moztransition'    : 'transitionend',      // ff < 15     'transition'       : 'transitionend'       // ie10, opera, chrome, ff 15+, saf 7+ }, transendeventname = transendeventnames[ modernizr.prefixed('transition') ]; 

then add eventlistener callback

element.addeventlistener(transendeventname, transitionendcallback); 

also can implement desired animation when element becomes active, once

#mytab.active img {   animation: bounce-left-right 2s ease 1; //actually 1 default it's not necessary  } @keyframe {   0% {//bounce left animation}   100% {//bounce right animation} }