javascript - How to slide an element of a Slider by Jquery -

i trying give slide effect slider elements jquery. trying slide h3 left direction, p right direction on slider. default has fade effect, trying give slide effect h3 , p, not thumbnails.

html:

<span class="content-margin"> <p>this p: famously orated against...</p> <h3><a href="#">h3: download here premium templates</a></h3> </span> 

js:

$('#headslide ul').cycle({ timeout: 4000, pager: '#headslide .pager',  after: function(currslideelement, nextslideelement, options, forwardflag){ $(nextslideelement).find("p" ).hide();                $(nextslideelement).find("p" ).toggle("slide");        return false;  }}); 

i hide/slide "p" elements callback , slide, not left/right.
please see slider fiddle >>

how slide h3 left , p right?

thanks in advance.

demo here

add below styles respective p , h3 a

#headslide p {     margin-left: 350px;     width: 100%;     opacity: 0;     display:block !important; }  #headslide h3 {     margin-left: -350px;     width: 100%;     opacity: 0;     display:block !important; } 

and js animate:

$(nextslideelement).find("p" ).animate({      'opacity':'1',//change opacity      'marginleft': '-=350px' //change marginleft 0px deducting -350px },1000,function(){ //amimate 1 second duration      settimeout(function(){ //set timeout of second           $(nextslideelement).find("p").animate({               'marginleft':'+=350px',               'opacity':'0'            });      },3000) });          $(nextslideelement).find("h3 a" ).animate({      'opacity':'1',      'marginleft': '+=350px' },1000,function(){       settimeout(function(){            $(nextslideelement).find("h3 a").animate({                 'marginleft':'-=350px',                 'opacity':'0'            });       },3000) }); 

the above 1 second , 3 seconds = total 4 seconds match 4 second slideshow animation