Reputation: 1194
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.
Upvotes: 0
Views: 71
Reputation: 29693
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
Upvotes: 1