How to slide an element of a Slider by Jquery

Question

I trying to give slide effect to a slider elements by jquery. trying to Slide h3 left direction, p right direction on this slider . By default it has fade effect, trying to give slide effect only to h3 and p , not to thumbnails.

HTML:

<span class="content-margin">
<p>This is 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 the "p" elements by this callback and it slide, but not from left/right.
Please See the Slider Fiddle >>

How to slide only h3 from left and p from right?

Thanks in advance.

Answer 1

DEMO HERE

Add below styles to your respective p and h3 a

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

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

and this JS to animate :

$(nextSlideElement).find("p" ).animate({
     'opacity':'1',//change its opacity
     'marginLeft': '-=350px' //change its marginLeft to 0px by deducting -350px
},1000,function(){ //amimate with 1 second duration
     setTimeout(function(){ //set a 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 and 3 seconds = total 4 seconds to match your 4 second slideshow animation