0

動的に生成されたWebページとJQueryプロジェクトの個人学習プロジェクトの最初の実装では、チェックボックスとtoggle（ "slow"）およびtoggle（ "fast"）を使用しました。ただし、CSにまったく慣れていないため、最初のプロジェクトでは、チェックボックスの状態の管理が少し複雑になりました。そのため、UXを処理するために<label>s.on('click', function(){...})と$('*').click(function(){...})withのみに切り替えました。.toggleClass('hidden')非表示クラスのCSSは次のとおりです。

.hidden {
    display: none;
}

問題は、クラスの切り替えが瞬時に行われることです。ユーザーがまたはと同じように表示できるようにしたいと.toggle()思い.toggle('slow')ます.toggle('fast')。この視覚的なフィードバックを実現するには、次の行をどのように変換しますか？

$(this).toggleClass('hidden');

私はtoggle、toggleClass、slideToggleのAPIを確認しましたが、特定の組み合わせが機能するかどうか知りたいと思いました。.toggleClass()それをtoggle（）に書き直す必要がある場合、の[switch]パラメーター と同様に、現在の状態を確認する必要があるため、showOrHideパラメーターを「show」または「fast」期間とともに含めるにはどうすればよいですか。

4

2 に答える 2

3

クラスの追加または削除をアニメーション化することはできません。クラスが存在するかどうかは関係ありません。.toggle('fast')効果は、要素を非表示にする前に、要素の特定のCSSプロパティをアニメーション化することによって生成されます。

「これをに書き換える必要がある場合、パラメータ と同様に現在の状態を確認する必要があるため、「show」または「fast」期間とともにパラメータtoggle()を含めるにはどうすればよいですか 。」showOrHide .toggleClass()'s [switch]

現在、.toggle()このように機能するバージョンはないため、次のようになります。

$(this).toggle('fast', showOrHide)

...代わりにこれを行うことができます：

$(this)[showOrHide ? "show" : "hide"]('fast');

...これは簡単な言い方です：

if (showOrHide)
   $(this).show('fast');
else
   $(this).hide('fast');

表示/非表示の完了時にコールバック関数を実行する場合は、次のようにします。

$(this)[showOrHide ? "show" : "hide"]('fast', function() { ... });
于 2012-07-25T05:12:18.070 に答える
0

おそらく、jqueryの表示および非表示関数$（'。target'）。show（）;を使用することをお勧めします。$（'。target'）。hide（）; http://api.jquery.com/show/ http://api.jquery.com/hide/これにより、アニメーション化されたトランジションとコールバックの追加の利点が得られます。次に、トグルの代わりに、表示がないかどうかを確認するだけで、表示するか非表示にするかがわかります。

于 2012-07-25T05:12:58.283 に答える