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＆gt;＆gt;

如何仅从左侧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 第二张幻灯片动画

如何通过Jquery

1 个答案: