3

jQuery UI を使用して背景色をアニメーション化しています。背景色のある5つのアイテムのリストがあります。各 li には、次のように css で指定された異なる背景色があります。

li:nth-child(1) {
    background-color: rgb(147, 215, 224);
}

各 li にはチェックボックスがあります。私はそれを次のように機能させたい:

現在、LI 内のすべてのチェックボックスがオンになっています。li 内のチェックボックスをオフにすると、li は特定の背景色になります (この背景色はすべての LI で同じになります)。チェックボックスを再度オンにすると、LI は以前の背景色にアニメーション化されます。私はこのコードを手に入れましたが、それが悪いことを知っています。チェックボックスをオフにすると、うまく機能し、背景色が希望どおりにアニメーション化されますが、もう一度オンにすると機能しませんでした。アニメーションが完了したら、スタイル属性を削除して作成しました。そして、私はこの結果を得ました：

入力をクリックすると、背景色が希望どおりにアニメーション化されますが、もう一度クリックしてチェックボックスを再度オンにすると、通常の色に戻りますが、非常に高速です。チェックボックスがチェックされているかどうかを定義する際にも、これには多くのバグがあります。これは私の現在のコードです：

    var state = true;
    $( "li input:checked" ).click(function() {
      if ( state ) {
        $(this).parent().parent().animate({
          backgroundColor: "#ECE7D2",
          color: "#fff"
        }, 1000 );
      } else {
        $(this).parent().parent().animate({
        }, 1000, "swing", function() {
            $(this).removeAttr("style");
        } );
      };

      state = !state;
    });

簡単に言うと、指定された背景色を持つ 5 つのアイテムのリストです。Jquery UI が読み込まれました。それらの中のチェックボックスがクリックされると (チェックされない)、項目の背景色が特定の色に変更されます。もう一度クリック（チェック）すると、以前の通常の色に変更するか、基本的に、最初に行ったアニメーションの背景色をキャンセルします。私がはっきりしていたことを願っています。

ありがとう。

アップデート：

http://jsfiddle.net/S9FVu/

4

3 に答える 3

2

CSS を使用するtransitionsと、それぞれに個別の色を選択できます。入力がチェックされているかどうかにかかわらず、クラスを追加するだけです:

$('input[type="checkbox"]').click(function(){  
    if($(this).is(':checked')){
      $(this).parents('li').removeClass('unchecked');
    } else {
      $(this).parents('li').addClass('unchecked');  
    }
});

次に、トランジションと必要な色を追加します。

.fusheveprimet > li {
    -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;
}

.fusheveprimet > li:nth-child(1) {
    background-color: rgb(15, 94, 136);
}
.fusheveprimet > li:nth-child(1).unchecked {
    background-color: #ECE7D2;
}

これがフィドルです。

于 2013-08-14T15:34:49.370 に答える
0

デモ

$('.fusheveprimet li').each(function () {
    $(this).attr('data-state', 'true');
});
$("li input:checked").click(function () {
    var par_li = $(this).parents('li');
    var state = par_li.attr('data-state');
    if (state == 'true') {
        par_li.stop(true, true).animate({
            backgroundColor: "#ECE7D2",
            color: "#fff"
        }, 1000);
        par_li.attr('data-state', 'false');
    } else {
        par_li.stop(true, true).animate({}, 1000, "swing", function () {
            $(this).removeAttr("style");
        });
        par_li.attr('data-state', 'true');
    };
});

attribute各 li data-state=に追加されtrueます。

現在チェックされていない親の変更された値li data-state=false

あなたのコードのエラー

stateonce が設定されtrue、次に for all に変更さfalseれます。

于 2013-08-14T15:36:13.403 に答える