如何通过 Jquery 滑动 Slider 的元素

Question

我试图通过 jquery 为滑块元素赋予幻灯片效果。试图在这个slider 上滑动h3 左方向，p 右方向。默认情况下它有淡入淡出效果，试图只给h3和p提供滑动效果，而不是缩略图。

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;
 }});

我通过这个回调隐藏/滑动“p”元素并且它滑动，但不是从左/右。
请看滑块Fiddle >>

如何只从左侧滑动h3 和从右侧滑动p？

提前致谢。

Answer 1

DEMO HERE

将以下样式添加到您各自的p 和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;
}

还有这个JS到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)
});

上面的 1 秒和 3 秒 = 总共 4 秒来匹配你的 4 第二个幻灯片动画