How to Slide Left to Right an Element by jquery

Question

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?

Answer 1

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.

  $('#headslide ul').cycle({
    timeout: 4000,
    pager: '#headslide .pager',
    before: resetMe,
    after: slideMe
});
function resetMe() {
      $(".content-margin").fadeIn();
    $(".content-margin").css( "left", "-=50" )
}

function slideMe() {
  $(".content-margin").animate({
    left: "+=50",
  }, 2000, function() {
  $(".content-margin").fadeOut();
     });
}

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.