jQuery的循環2 - 淡入/ fadout內容重疊問題

請結算JSFiddle jQuery的循環2 - 淡入/ fadout內容重疊問題

<div class="right-panel"> 
     <div class="cycle-slideshow testimonials" 
     data-cycle-fx="fadeout" 
     data-cycle-speed=3500 
     data-cycle-timeout=1000 
     data-cycle-slides="> blockquote" 
     >

如何避免內容重複，當滑塊淡入/輸出

來源

2014-03-14 ShibinRagh

內容重疊，是因爲緩慢的動畫速度發生問題（數據-cycle速）。您看到重疊的額外原因是由於缺乏blockquote元素的背景。我更新了你的提琴，使動畫更快的連接可以將blockquote具有背景色：http://jsfiddle.net/veritas87/qLQv5/1/

可以設定轉速（幻燈片多長時間停留在屏幕上）與數據週期超時：

data-cycle-speed=500 
data-cycle-timeout=3000

來源

2014-03-14 08:19:16

可以試試這個.. Working Fiddle

在html中進行了一些更新。

.right-panel div{ 
background:#fff; 
}

來源

2014-03-14 08:22:07

檢查了這一點：http://jsfiddle.net/Mbs46/

.right-panel blockquote{ 
background-color:#fff; 
    height:100%; 
}

來源

2014-03-14 09:15:38

你的問題是由sync選擇與搭配您的fx選項的設置fadeout的true它的默認值造成的。

從jQuery循環2 API文檔：

同步：如果true然後傳入和傳出幻燈片的動畫將是同步。如果false那麼傳入幻燈片的動畫將不會啓動，直到傳出幻燈片的動畫完成。

沒有說明爲fadeout轉換提供了說明，但觀察表明它只是：淡出。這與淡出初始幻燈片和新幻燈片的默認淡入淡出行爲形成對比。我以爲使用fadeout會很好：預期的行爲（sync設置爲false）會是初始幻燈片會淡出，只有完成後，新的幻燈片纔會「出現」。相反，新幻燈片在淡出開始的同時出現。

我要做的是讓Cycle2執行默認的淡入淡出效果，並將sync選項設置爲false。這裏有一個JSFiddle來演示。

您會注意到不需要爲幻燈片添加背景。

HTML：

<div class="right-panel"> 
    <div class="cycle-slideshow testimonials" 
     data-cycle-speed=3500 
     data-cycle-timeout=1000 
     data-cycle-slides="&gt; blockquote" 
     data-cycle-sync="false"> 
     <blockquote> 
      <p>Moving Permits is an absolutely essential service for lorem ipsum dolor sit amet manga aliqua.</p> 
      <cite>- John Doe</cite> 
     </blockquote> 
     <blockquote> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> 
      <cite>- John Doe</cite> 
     </blockquote> 
    </div> 
</div>

注：我在上述HTML編碼>作爲>因爲SO錯誤地將其視爲一個結束標記。您可以在實際的HTML中使用>。（這是一個SO question that addresses this specifically）。

來源

2017-05-19 00:11:18 Luke

jQuery的循環2 - 淡入/ fadout內容重疊問題

回答

相關問題