jQuery UIタブでCSSトランジションを実行するにはどうすればよいですか？

Question

私は、ユーザーがタブをクリックすると、タブ間の移行をスムーズにします。

私はjQueryのタブを知っているが（約animation fxこの質問を参照してください）基本的なアニメーションをサポートしていますが、どのように私は、移行をスムーズに行うことができますか？

Answer 1

あなたはこの作業を取得するためにいくつかのことを行う必要があります：あなたのタブが左右にスライドできるよう

1. はjQueryのUI

2. 構造あなたのHTMLが付属してCSSを使用しないでください。

3. は、 "左" の移行のためのCSSを追加します。たとえば、次のようにタブが選択されている場合

   #tabs .tabs-container-wrapper .tabs-container { transition:left 0.5s ease-in-out; } 
   

4. 、「左」の値を変更します。

   $(function() { 
       var onTabChange = function(event, ui) { 
       $("#tabs .tabs-container-wrapper .tabs-container").css("left", offsets[ui.index]); 
       }; 
       $('#tabs').tabs().bind('tabsselect', onTabChange); 
   }); 
   

this gist for a full working exampleを参照してください。

これは、移行をサポートし、それがサポートされていない場合は、通常のタブの動作にフォールバックする近代的なブラウザでは動作します。

Answer 2

物事が年間で簡単になりました、今ではそのためのオプションに組み込まれて、例えば左アウトへとから、右スライドだけです：

$("#tabs .tabs-container-wrapper .tabs-container").tabs({ 
     hide: { effect: "slide", duration: 800, direction: "left", easing: "easeInOutQuart" }, 
     show: { effect: "slide", duration: 800, direction: "right", easing: "easeInOutQuart" } 
});