0

ページにいくつかのテーブルがありますが、そのうちの 3 つしか表示されていません。[次へ] をクリックすると、ID が最も低いテーブルが消え、別の非表示のテーブルが表示されます。

前をクリックすると、最も高い ID が消え、低い ID の非表示のテーブルが表示されます。

私のCSS：

table.invisible{ display: none }

私のhtml：

<button id="next"></button><button id="prev"></button>
<table id="1" class="visible" >...</table>
<table id="2" class="visible" >...</table>
<table id="3" class="visible" >...</table>
<table id="4" class="invisible" >...</table>
<table id="5" class="invisible" >...</table>
<table id="6" class="invisible" >...</table>

私のJS：

$("#next").click(function(){
    $(lowest_visible_id).removeClass('visible');
    $(lowest_visible_id).addClass('invisible');

    $(highest_visible_id+1).removeClass('invisible');
    $(highest_visible_id+1).addClass('visible');
});

$("#prev").click(function(){
    $(highest_visible_id).removeClass('visible');
    $(highest_visible_id).addClass('invisible');

    $(lowest_visible_id-1).removeClass('invisible');
    $(lowest_visible_id-1).addClass('visible');
});

それはすべて機能します。しかし、それは非常に単純な方法で機能します - 1 つのテーブルが非表示になり、別のテーブルが表示され、それで終わりです。見栄えを良くする方法を教えてください。（私はjqueryを使用していると思いますが、悲惨な結果で試しました:)）

4

4 に答える 4

0

テーブルをアニメーション化することは実際には不可能ですが、簡単にアニメーション化できるものでテーブルをラップして、目的の効果を得ることができます。

jQuery には優れた効果が組み込まれており、ブラウザーのサポートも充実しています。これは、テーブルをアニメーション化するための非常に単純な jQuery アプローチであり、テーブルを div でラップしてから div をアニメーション化するいくつかのトリックがあります。

$("#next").click(function(){
    $(lowest_visible_id).wrap("<div />").parent()
        .slideUp(function(){
               $(lowest_visible_id).unwrap().removeClass("visible").addClass("invisible");
      }); 

    $(highest_visible_id+1).fadeIn().removeClass("invisible").addClass("visible");
});

これは単なる概念実証です。これは、次のボタンのそれを示すフィドルです。http://jsfiddle.net/ydquw/4/ 前のボタンも同様ですが、一番上の要素に slideDown() を使用し、一番下の要素に fadeOut() を使用できます。

于 2013-01-03T02:28:22.973 に答える
0

CSS トランジションについて考えたことはありますか? 私は次のようなことに成功しました：

.hidden {
  opacity: 0;
  width: 0;
  height: 0;
  transition: opacity 0.3s ease-out 0.001s, width 0 ease-out 0.3s, height 0.3s ease-out 0.3s;
}

.visible {
  opacity: 1;
  transition: opacity 0.3s ease-out 0.1s, width 0.001s ease-out 0.001s, height 0.001s ease-out 0.001s;
}

これの意味は：

  • 不透明度をすぐにアニメートする (フェードイン/フェードアウト)
  • 幅と高さをゼロに変更する前に、フェードアウトを待ちます (ユーザーの操作を避けるため)。

それが好みでない場合は、他に無限のオプションがあります。

http://www.css3maker.com/css3-transition.html

于 2013-01-03T01:00:05.513 に答える
0

jQuery UI switchClass()を使用できます。

概要
すべてのスタイルの変更をアニメーション化しながら、指定されたクラスを一致した要素のセットのそれぞれに追加および削除します。

メソッド シグネチャ
.switchClass(removeClassName, addClassName [, duration ] [, easing ] [, complete ])

たとえば、テーブル 1 を表示し、テーブル 2 を同時に非表示にするには (最初は両方とも反対の状態にあると仮定します):

// Switches table 1 from visible to invisible over a period of 1 second.
$("table#1").switchClass("visible", "invisible", 1000);

// Switches table 2 from invisible to visible over a period of 1 second.
$("table#2").switchClass("invisible", "visible", 1000);

さらに大きな効果を得るには、次のように、メソッド、easing引数、または引数を使用してcallbackクラス切り替えをチェーンし、最初の切り替えが完了した後に確実に開始されるようにすることができます。

// Switches table 1 from visible to invisible and once it completed, table 2 will switch from invisible to visible.
$("table#1").switchClass("visible", "invisible", 1000, function(){
    $("table#2").switchClass("invisible", "visible", 1000);
});

すべての引数の詳細と例については、 API ドキュメントを参照してください。

既存のコードを使用して、次のように実装できますswitchClass()。

$("#next").click(function(){
    $(lowest_visible_id).switchClass('visible', 'invisible', 1000);
    $(highest_visible_id+1).switchClass('invisible', 'visible', 1000);
});

$("#prev").click(function(){
    $(highest_visible_id).switchClass('visible', 'invisible', 1000);
    $(lowest_visible_id-1).switchClass('invisible', 'visible', 1000);
});
于 2013-01-03T01:00:32.187 に答える
0

みたいなものはどう...

$('#next').クリック(関数() {

$('#table1').fadeOut(1000, function() {

$('#table2').fadeIn(1000); });

});

ちょっと考えただけです...そして、変数を介して非常に簡単にパラメータ化/抽象化できます...

于 2013-01-03T01:29:56.490 に答える