0

私はこれについて間違った方法で行っている可能性があるので、それが悪い習慣である場合はそう言ってください.

チェックボックスとラベルを含む DIV があります。DIV はボタンのようにスタイル設定されており、ユーザーが DIV をクリック (またはタップ) すると、チェックボックスの値または状態がオンとオフの間で切り替わるようにコードを記述しました (これは以下のコードには含まれていません)。 .

DIV HTML は次のようになります…</p> 

<div class="funkyCheckBox">
<label for="inputName">Label Text</label>
<input type="checkbox"  name="inputName" id="inputID" />
</div>

ユーザーが DIV をクリックまたはタップすると、コンテナー DIV (.funkyCheckBoxクラスのあるもの) の外観も変更して、チェックボックスの状態が変化したことをユーザーに視覚的に明らかにしたいと考えています。jQuery トグルを使用してアクティブ状態を DIV に追加します (クラス funkyCheckBoxActive が DIV に追加または削除されます)。

これがCSSです…</p> 

.funkyCheckBox{
    display:block;
    border-radius: 1em 1em 1em 1em;
    margin-bottom:.5em;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #eaeaea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#eaeaea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
    padding:.5em;
    }

    .funkyCheckBoxActive{
    background: blue; 
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
    }

これが私の編集した jQuery コードです…</p> 

$(".funkyCheckBox").live("click, tap", function(){
    $(this).toggleClass("funkyCheckBoxActive");

});

ユーザーが.funkyCheckBoxDiv の 1 つをクリックすると、素敵な CSS トランジションで新しいクラスが追加されます。もう一度クリックすると.funkyCheckBoxActiveクラスが削除されますが、クラスが削除されたときに、即時の削除ではなく同様の遷移が必要です。これについて最善の方法は何ですか。クラスに同様のトランジションを追加することを考えました.funkyCheckBoxが、これが機能しないか、望ましい効果が得られないことはわかっています。アイデアはありますか？

私の問題を十分に説明していない場合は、そう言ってください。言い直します。

4

1 に答える 1

0

アクティブなクラスに CSS3 トランジションを使用しましたが、元の funkyCheckBox には単純な背景グラデーションがあります。同様の効果を得るには、背景グラデーションの代わりに funkyCheckBox クラスで CSS トランジションを使用します。

于 2012-10-19T09:44:48.370 に答える