css - How to change cycle jquery caption text fadein, fadeout to bounce effect? -

i using cycle jquery slideshow site. html code.

 <div class="slideshow_item">     <div class="image"><a href="#"><img src="#"/></a></div>     <div class="data">     <h4><a href="#">title1</h4>     <p>content</p>     </div>     </div> 

the below 1 javascript code

<script> $(function() {  // --------------------------------------------------- // slideshow 1      $('#slideshow_1').cycle({         fx: 'scrollhorz',                easing: 'easeinoutcirc',         speed:  700,             timeout: 5000,          pager: '.ss1_wrapper .slideshow_paging',          prev: '.ss1_wrapper .slideshow_prev',         next: '.ss1_wrapper .slideshow_next',         before: function(currslideelement, nextslideelement) {             var data = $('.data', $(nextslideelement)).html();             $('.ss1_wrapper .slideshow_box .data').fadeout(1200, function(){                 $('.ss1_wrapper .slideshow_box .data').remove();                 $('<div class="data">'+data+'</div>').hide().appendto('.ss1_wrapper .slideshow_box').fadein(1200);             });         }     });      // not using 'pause' option. instead make slideshow pause when mouse on whole wrapper     $('.ss1_wrapper').mouseenter(function(){         $('#slideshow_1').cycle('pause');     }).mouseleave(function(){         $('#slideshow_1').cycle('resume');     });  // ---------------------------------------------------      $('a[href="#"]').click(function(event){          event.preventdefault(); // demo disable links point "#"     });  }); </script> 

in html code under .data have h4 , p tags. slider works great slide horizontal , caption (.data) flows on slider because of position absolute in .data , works fine. now, question is, how bounce caption(.data) top bottom, or left side right side animatically changing above javascript incase of fadein , fadeout. please me.

bounce effect comes jquery ui, don't forget include library on page.
guess may call effect() method achieve result want. it's possible set 4 options "bounce" effect:

direction: direction of effect. can "up", "down", "left", "right". default "up".
distance: distance bounce. default 20
mode: mode of effect. can "show", "hide" or "effect". default "effect".
times: times bounce. default 5.

it's direction, distance , times choose, here important mode. instead of fadeout, hides element, set mode 'hide' , instead of fadein, shows element, set mode 'show'.

here how method looks like:

.effect("bounce", {mode: "hide", times: 4, direction: "up"}, 1200, function(){}); 

as see, first of all, chose "bounce" effect, goes array of available options, goes duration (in case 1200 or 1.2 second) , last 1 function runs after effect ends.

here quick jfiddle example how bounce works 'show' , 'hide' mode: http://jsfiddle.net/z73p5/2/

so, try change 'before' parameter of cycle plugin this. hope work.

before: function(currslideelement, nextslideelement) {          var data = $('.data', $(nextslideelement)).html();          $('.ss1_wrapper .slideshow_box .data').effect("bounce", {times: 4, direction: "up", mode: "hide"}, 1200, function(){             $('.ss1_wrapper .slideshow_box .data').remove();             $('<div class="data">'+data+'</div>').hide().appendto('.ss1_wrapper .slideshow_box').effect("bounce", {times: 4, direction: "down", mode: "show"}, 1200);         });      }