0

ここでは、jQuery ツールのタブとアコーディオンを使用しています: http://www.jquerytools.org/demos/tabs/accordion.htm

全体が

コード：

$("#accordion").tabs(
  "#accordion div.pane",
  {tabs: 'h2', effect: 'slide', initialIndex: null}
);

ペインのコンテンツはスライド機能で表示されますが、私のセットアップでは、スライド アニメーションが終了したときにのみペイン内の画像を表示し、現在のタブの画像をすぐに非表示にする必要があります。アコーディオン ヘッダーがクリックされます。いじりましたが、動作させることができませんでした。

画像を display:none; に設定することを考えました。残りのコンテンツが明らかになったら表示するように変更しますか?

上記のコードに何かを追加することでこれを行うことができますか? どうもありがとう

4

4 に答える 4

2

カスタムアニメーションをやりたいと思うでしょう。それはかなり簡単なはずです。

  $.tools.tabs.addEffect("custom", function(tabIndex, done) {

  // hide any images
  $("#accordion img").hide();

  // hide all panes and show the one that is clicked, on complete show images
  this.getPanes().hide().eq(tabIndex).show('fast',function(){
      //show the images again now that the animation has finished
      $("#accordion img").show();
  });

  // the supplied callback must be called after the effect has finished its job
  done.call();
  });

次に、アニメーション効果「スライド」を「カスタム」に置き換えることができます。

于 2012-06-20T20:35:34.127 に答える
0

画像を表示するように設定することを考えました：none; 次に、残りのコンテンツが表示されたら表示するように変更しますか？

それが私がそれをする方法です。display：none、すべての画像、次に：

$(document).ready(function () {
    $("#accordian img").show();
});

ドキュメント全体が読み込まれるまで、画像は表示されません。

于 2012-06-20T20:27:41.243 に答える
0

アコーディオンのペインを開いてその中にある画像を表示したい場合は、アコーディオンの変更イベントを調べてください。このイベントは、ペインが開かれたときに気付く可能性があります。はい、最初に画像を非表示に設定する必要があります。

于 2012-06-20T20:30:45.530 に答える
0

タブの「ロード」イベントに直接バインドできます...

$("#accordion").tabs(
  "#accordion div.pane",
  {tabs: 'h2', effect: 'slide', initialIndex: null,
    load: function(event, ui){
      $('accordian img').show();
    }
  }
);

タブの読み込みが完了すると (DOM の準備が整うと)、div に画像が表示されDOM has been updated to completely reflect the changes to the elements in the tabます。

于 2012-06-20T20:35:19.647 に答える