Trying to Slide h3
title to right direction by jquery to this slider. This slider has fade effect by default, I’m trying give slideRight effect to h3
title of slider.
HTML:
<div id="headslide">
<ul>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#">
<img src="http://3.bp.blogspot.com/-h4-nQvZ5-VE/VQ3HLtSS3ZI/AAAAAAAABIc/iaOda5zoUMw/s350-h260-c/girl_with_winter_hat-wallpaper-1024x768.jpg" height="260" width="350"/>
</a>
</div>
<span class="content-margin">
<p>Cicero famously orated against his p...</p>
/* Title */
<h3><a href="#">Download Premium Blogger Templates</a></h3>
<span class="info">Info</span>
</span>
</li>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#">
<img src="http://3.bp.blogspot.com/-YfkF1u_VB40/VWr5dYf00gI/AAAAAAAABW8/wv2e-Lu4etw/s390-h340-c-h340-c/11071467_807062866056131_872486685669967339_n.jpg" height="260" width="350"/>
</a>
</div>
<span class="content-margin">
<p>SEO friendly Flat style Custom Fonts.</p>
/* Title */
<h3><a href="#">Modern with a pixel-perfect eye</a></h3>
<span class="info">Info</span>
</span>
</li>
</ul>
</div>
I have tried this
$(".content-margin").delay(400).show("h3", { direction: "right" }, 1200);
Please see this Fiddle >>. I’m trying to do this by jquery.
any suggestion?
3
Answers
Just change this in your CSS:
to this:
Just use this jquery code
I believe this is about as close as the .cycle is going to allow.
Hopefully This is what you were going for.
Change “.content-margin” if you want something else to be animated.
I can’t get the forked fiddle link to run but when I copy and paste the code into your fiddle it works great.
.Cycle doesnt really allow for animate, so you can use the “before” and “after” to call functions that do the animation you are looking for. This just treats .cycle like a loop.