javascript - animating html elements - flexslider -

how animate html elements on each slide of flexslider after animations of slides. searched internet hours. not find tutorial or can help. couldsomeone show me , example of how it. link jsfiddle

html

<div class="flexslider">   <ul class="slides">     <li>       <img src="http://placehold.it/350x150">           <div><h1>heading</h1></div>           <div><h2>heading</h2></div>     </li>     <li>       <img src="http://placehold.it/350x150">     </li>     <li>       <img src="http://placehold.it/350x150">     </li>     <li>       <img src="http://placehold.it/350x150">     </li>   </ul> </div> 

js

$('.flexslider').flexslider({     animation: "slide"   });  $("div h1").fadein(3000); $("div h2").animate({left:'250px'}); 

you can achieve using callback functions provided flexslider.

callback functions:

start: function(){} //fires when slider loads first slide before: function(){} //fires asynchronously each slider animation after: function(){} //fires after each slider animation completes 

you can refer doc more information on available callback functions : http://www.woothemes.com/flexslider/

now i've updated fiddle solution using fade in possibility.

below changes made code , here updated fiddle link

html

<div class="flexslider"> <ul class="slides">     <li>         <img src="http://placehold.it/350x150">         <div>             <h1>heading</h1>         </div>         <div>             <h2>heading</h2>         </div>     </li>     <li>         <img src="http://placehold.it/350x150">         <div>             <h1>heading</h1>         </div>         <div>             <h2>heading</h2>         </div>     </li>     <li>         <img src="http://placehold.it/350x150">         <div>             <h1>heading</h1>         </div>         <div>             <h2>heading</h2>         </div>     </li>     <li>         <img src="http://placehold.it/350x150">         <div>             <h1>heading</h1>         </div>         <div>             <h2>heading</h2>         </div>     </li> </ul> 

javascript

  $("div h1").css('display', 'none'); //hide h1   $("div h2").css('display', 'none'); //hide h2   $('.flexslider').flexslider({   animation: "slide",   start: function () {        $("div h1").fadein(1000);       $("div h2").fadein(1000);    },   after: function () {        $("div h1").fadein(1000);       $("div h2").fadein(1000);    },   before: function () {        $("div h1").css('display', 'none');       $("div h2").css('display', 'none');    }  }); 

i hope has solved problem :). happy coding!