如何通過jquery滑動滑塊的元素

我試圖通過jQuery給滑塊元素提供滑動效果。試圖將h3向左滑動，p向此滑動slider。默認情況下，它具有淡入淡出效果，試圖僅給予h3和p的幻燈片效果，而不是縮略圖。如何通過jquery滑動滑塊的元素

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右？

在此先感謝。

來源

2015-06-04 Aariba

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 第二幻燈片動畫

來源

2015-06-04 04:31:37

大，如果幻燈片動畫是8，那麼它應該是什麼？ – Aariba

將'setTimeout'從'3000'增加到'7000'。就如此容易！或者它可以在組合上有所不同，以使'8000'像''動畫'持續時間從'1000'到'2000'和'setTimeout'持續時間從'3000'到'6000'等等.. –

非常感謝。 – Aariba

如何通過jquery滑動滑塊的元素

回答

相關問題