JQuery UI顯示/幻燈片不能正常工作

所有編輯的編輯：在幾個月的工作後，問題似乎是噹噹前元素內的一些/所有元素浮動/絕對定位。這似乎會干擾滑動。JQuery UI顯示/幻燈片不能正常工作

如果您有同樣的問題，祝您好運，以解決您的問題。

原帖：

真的很簡單。我有幾個div與幾個元素，並且只有其中一個div顯示在一個時間（其餘都隱藏）。

當用戶點擊「下一步」時，當前div應該通過向左滑動隱藏，並且下一個div應該通過從右側滑入來顯示（實際的邏輯不是問題）。

當我嘗試使用.slideUp（）和.slideDown（）時，它工作得很好。但是，嘗試時：

$(oldBox).hide("slide", { direction: "right" }, 1000);

它不起作用。我已經將JQuery UI鏈接到了，所以這不是問題。

任何幫助將不勝感激。

編輯：鏈接的jsfiddle：http://jsfiddle.net/NFyRW/

EDIT2：它單詞的jsfiddle;但是，我一直無法讓它在我的實際網站上運行。 JS在單獨的文件中，並加載到每個頁面的標題中（每個頁面的標題相同）。

來源

2013-05-10 General_Twyckenham

你能爲此創建一個jsFiddle嗎？ – j08691 2013-05-10 01:30:04

當然，給我一下 – 2013-05-10 01:37:55

至少需要標記。 – 2013-05-10 01:45:25

如果您的幻燈片已絕對定位，請使用左側屬性對它們進行動畫處理。如果它們是相對的，那麼將左邊的餘量向左切換。

考慮到你的HTML看起來類似於此：

<div id="mainContainer"> 
    <div class="slide"></div> 
    <div class="slide"></div> 
</div> 

#mainContainer {} 
.slide {position:absolute;top:0;left:0;}

像這樣的東西應該

淡出當前幻燈片
推出當前幻燈片向左
褪色新幻燈片
從右側拉入新幻燈片

。

var $oldBox=$('#oldBox'); 
    $oldBox.animate({ 
     'left':-$oldBox.outerWidth(true), 
     'opacity':0 
    },{duration:500,queue:false, 
    specialEasing:{'left':'linear','opacity':'linear'}}); 

    $newBox.animate({ 
     'left':0, 
     'opacity':1 
    },{duration:500,queue:false, 
    specialEasing:{'left':'linear','opacity':'linear'}});

來源

2013-05-10 01:43:10 Aaron

試過這個，沒有工作:( – 2013-05-10 01:49:49

-2

Twyckenham將軍，我和你們的問題一樣。

我通過調用custom-min.js文件解決了這個問題。嘗試這個。

<script src="js/jquery-1.9.1.js"></script> 
<script src="js/jquery-ui-1.10.3.custom.js"></script>

$(document).ready(function() { 
    $("#hide").click(function(){ 
    $(".target").hide("slide", 
    { direction: "left" }, 2000); 
    }); 
    $("#show").click(function(){ 
    $(".target").show("slide", 
    {direction: "right" }, 2000); 
    });

}）;

這對我有效。我想知道爲什麼沒有人提到這個自定義文件的用法。

問候

來源

2013-11-07 06:10:16 sumanas

這沒有任何意義，你通過調用custom-min.js解決了這個問題？ – idmean 2013-11-12 17:48:08

包括jQuery的，以及jQuery UI的JS和CSS文件

有沒有需要定製js文件。然後可以使用下面的代碼：

$（this）.effect（「slide」，「right」）;或 $（this）.effect（'slide'，{direction：'down'}，500）;

來源

2014-11-14 07:19:43

JQuery UI顯示/幻燈片不能正常工作

回答

相關問題