如何將交叉淡入淡出添加到UI標籤？

嗨，我從http://forum.jquery.com/topic/how-to-add-a-cross-fade-to-ui-tabs複製問題，因爲我有同樣的問題。如何將交叉淡入淡出添加到UI標籤？

大家好

我已經使用標準UI標籤代碼設置了選項卡式界面。

<script type="text/javascript"> 
$(function() { 
$("#tabbedArea").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 6000, 'true') 
}); 
</script>

此時，一個顯示的標籤淡出，在下一個標籤出現之前留出空白。

我想要發生的是，當tab1淡出，選項卡2淡入 - 創建交叉淡入淡出。

誰能告訴我如何做到這一點？

在此先感謝

來源

2011-01-09 Yosef

可能重複：http://stackoverflow.com/questions/1350666/jquery-ui-tabs-available-fx-options – ifaour 2011-01-09 14:50:12

的問題沒有回答正確的 - 它的變化，而不是正確的交叉之間尚白-褪色。所以我的問題仍然沒有回答 – Yosef 2011-01-09 15:23:02

我認爲jQuery用戶界面無法在默認情況下做到這一點。然而，jQuery標籤UI comes with a event "show"，您可以在其中編寫一些自定義代碼來自行切換標籤。

$(document).ready(function() { 
    $("#tabs").tabs({ 

     show: function(event, ui) { 

      var lastOpenedPanel = $(this).data("lastOpenedPanel"); 

      if (!$(this).data("topPositionTab")) { 
       $(this).data("topPositionTab", $(ui.panel).position().top) 
      }   

      //Dont use the builtin fx effects. This will fade in/out both tabs, we dont want that 
      //Fadein the new tab yourself    
      $(ui.panel).hide().fadeIn(500); 

      if (lastOpenedPanel) { 

       // 1. Show the previous opened tab by removing the jQuery UI class 
       // 2. Make the tab temporary position:absolute so the two tabs will overlap 
       // 3. Set topposition so they will overlap if you go from tab 1 to tab 0 
       // 4. Remove position:absolute after animation 
       lastOpenedPanel 
        .toggleClass("ui-tabs-hide") 
        .css("position", "absolute") 
        .css("top", $(this).data("topPositionTab") + "px") 
        .fadeOut(500, function() { 
         $(this) 
         .css("position", ""); 
        }); 

      } 

      //Saving the last tab has been opened 
      $(this).data("lastOpenedPanel", $(ui.panel)); 

     } 

    }); 
});

現場演示：

http://jsfiddle.net/FFTzU/7/

來源

2011-02-18 11:50:01 Richard

大答案理查德只是我需要的東西！我有一個想法，你的解決方案會調用2個動畫（淡出和淡入），這在我的js-heavy頁面上看起來不那麼光滑。我已經稍微編輯了你的解決方案，以使用z-index和1淡入淡出。至少這對我來說有點平滑。

$("#tabs").tabs({ 
    show: function(event, ui) { 
    var lastOpenedPanel = $(this).data("lastOpenedPanel"); 
    if (!$(this).data("topPositionTab")) { 
     $(this).data("topPositionTab", $(ui.panel).position().top) 
    } 
    // do crossfade of tabs 
    $(ui.panel).hide().css('z-index', 2).fadeIn(1000, function() { 
     $(this).css('z-index', ''); 
     if (lastOpenedPanel) 
     { 
     lastOpenedPanel 
      .toggleClass("ui-tabs-hide") 
      .hide(); 
     } 
    }); 

    $(this).data("lastOpenedPanel", $(ui.panel)); 
    } 
}).tabs('rotate', 3000);

我在最後添加了旋轉，因爲這使得相當不錯的幻燈片！

湯姆

來源

2011-04-05 11:14:22 lopsided

如何將交叉淡入淡出添加到UI標籤？

回答

相關問題