如何用jquery从左向右滑动元素

Question

试图通过jquery将h3标题滑入正确的方向，以实现滑块。此滑块在默认情况下具有淡出效果，我正在尝试将slideRight效果赋予滑块的h3标题。

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>

我试过这个

$(".content-margin").delay(400).show("h3", { direction: "right" }, 1200);

请看这个小提琴 >>。我正试图通过jquery来完成这个任务。

有什么建议吗？

Answer 1

我相信这几乎是.cycle所允许的。

希望这就是你想要的。

如果您想要动画化的东西，请更改“.”。

  $('#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();
     });
}

我无法运行分叉键，但当我复制并粘贴代码到您的小提琴，它的工作很好。.Cycle并不真的允许动画，所以你可以使用“前”和“后”来调用你想要的动画功能。这只是把.cycle当作一个循环。

Answer 2

只需在CSS中更改以下内容：

#headslide h3 {
-webkit-animation-name:bounceInLeft;
-moz-animation-name:bounceInLeft;
-o-animation-name:bounceInLeft;
animation-name:bounceInLeft;

对此：

#headslide h3 {
-webkit-animation-name:bounceInRight;
-moz-animation-name:bounceInRight;
-o-animation-name:bounceInRight;
animation-name:bounceInRight;