2015-06-04 83 views
0

我試圖通過jQuery給滑塊元素提供滑動效果。試圖將h3向左滑動,p向此滑動slider。默認情況下,它具有淡入淡出效果,試圖僅給予h3p的幻燈片效果,而不是縮略圖。如何通過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 >>

如何從滑動只剩h3p右?

在此先感謝。

回答

1

DEMO HERE

下方添加樣式應用到各自的ph3 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 第二幻燈片動畫

+0

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

+1

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

+0

非常感謝。 – Aariba