1

申し訳ありませんが、私が初心者の場合、jqueryの経験はまだありません。私は本を​​読んでいますが、これにトランジションを追加する方法がわかりません...

<script>
$(function(ready){
$('select[id="options-1"]').change(function(){  

if ($(this).val() == "1")
     $('.preview-1').addClass("active").siblings().removeClass("active");

if ($(this).val() == "2")
     $('.preview-2').addClass("active").siblings().removeClass("active");

if ($(this).val() == "3")
     $('.preview-3').addClass("active").siblings().removeClass("active");

if ($(this).val() == "4")
     $('.preview-4').addClass("active").siblings().removeClass("active");

if ($(this).val() == "5")
     $('.preview-5').addClass("active").siblings().removeClass("active");

});
});
</script>

このスクリプトは、ドロップダウンメニューから値を取得し、それを使用して画像（LIタグでラップされている）のクラスを変更します。これにより、画像が表示されます。

<li id="preview-5869" class="preview-2">
<li id="preview-2388" class="preview-1 active">

クラス'active'は、画像を表示します。上記の2行のコードでは、クラス「preview-1active」のliタグが表示されます。

私がやろうとしているのは、写真を即座に変更する代わりに、素晴らしいフェード効果があるトランジションを作成することです。皆さん、これを手伝ってくれませんか？

前もって感謝します。

4

1 に答える 1

0

これは、jQueryfadeInとfadeOut関数を使用して行うことができます。これは、私がその効果をどのように作成したかについての私の例です。クラス名を削除したり、新しいクラス名を追加したりするプロセスを遅くすることはできないことに注意してください。したがって、最初fadeOutに現在表示されているすべての要素を最初に表示し、次にfadeIn選択されている要素を選択する必要があります。これが私がこれをどのように達成したかについての私の例です：

http://jsfiddle.net/sarcastyx/Xhu4x/

于 2012-08-03T05:25:38.300 に答える