0

概要：[JQuery]タブが実装されました。タブにエフェクトを追加したいだけです。

HTMLコード：

   <div id=tabs >
    <ul>
   <li><a href="#div1"><span>Div1</span></a></li>
    <li><a href="#div2"><span>Div2</span></a></li>
    <li><a href="#div3"><span>Div3</span></a></li>
     </ul>
    <div id=div1 ></div>
    <div id=div2 ></div>
    <div id=div3 ></div>
     </div>

JQueryコード：

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

これは、タブGUIを実装し、タブ付きインターフェイスを作成するために正常に機能します。エフェクトを実装したいのですが。例：「ブラインド」、「バウンス」、「クリップ」、「ドロップ」、「爆発」、「フォールド」、「ハイライト」、「パフ」、「脈動」、「スケール」、「シェイク」、「サイズ」、「スライド'、'転送'。

どうすればこれを行うことができますか？私が読んだドキュメントから：

   $("#tabs").tabs(
   //here is where there should be implementation of the effect

   "#div1",{effect:'explode'}
   "#div2",{effect:'explode'}
   "#div3",{effect:'explode'}

   );
   });

このコードは、アニメーションを進めるために建設的なことは何もしません。

試しました

$("#div1"){effect:'effectname' 'effectproperties' }

しかし、これも効果がありません。

それらが機能するドキュメントから提供する例：

 $("#tabs").tabs(
   //here is where there should be implementation of the effect

 { fx: { opacity: 'toggle' } } 
  );
4

1 に答える 1

4

あなたが望むことを達成するためにexplode（それが実際にあなたが使いたいものであり、それが例ではなかったと仮定して）、あなたは$.tab() showイベントを処理する必要があります。少なくとも私が知る限り、fx組み込みのサブシステムで$.tabs()はUI効果を選択できません。

だから、多かれ少なかれ次のようなもの：

$("#tabs").tabs({
    show: function(event, ui) {
        var $target = $(ui.panel);

        $('.content:visible').effect(
            'explode',
            {},
            1500,
            function(){
                $target.fadeIn();
        });
    }
});

http://jsfiddle.net/userdude/2TDsq/2

組み込みのfxオプションシステムを使用するだけの場合は、次のことを行う必要があります。

$("#tabs").tabs(
    {fx: {opacity: 'toggle'}}
);

http://jsfiddle.net/userdude/2TDsq/1/

ただし、これは難しいことではなく、他の人はそのセットアップの使用方法に関する（おそらく多数の）SO複製にリンクしています。

于 2012-07-14T17:00:06.950 に答える