jquery - divにホバリングするjQuery

Question

私はjQueryにかなり慣れていないので、これについて頭を悩ませることはできません。

を選択しようとしています<a href="contact"><div id="res">Reserveren</div></a>。

これは私のjQueryコードです:

 $(document).ready(function() {

 $('#res').hover(
    function () {
    $(this).animate({backgroundColor: "#fff" });
    },
    function () {
    $(this).animate({backgroundColor: "#000" });
    }

  });

しかし、何も機能していません。何も変わりません...何が間違っていますか？

前もってありがとう、バート

score 7 · Accepted Answer

jQuery は、適切なプラグインまたはjQuery UI ライブラリを使用しないとアニメーション化できません。color

ただし、クラス名を使用して CSS トランジションを利用することはできます。

$('#res').hover(
    function () {
        $(this).addClass('animating');
    },
    function () {
        $(this).removeClass('animating');
    });

次の CSS を使用します。

#res { /* default styles */
    background-color: #000;
    -moz-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    transition: background-color 1s linear;
}

#res.animating, /* hovered-class/animating styles */
.animating {
    background-color: #fff;
    -moz-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    transition: background-color 1s linear;
}

JS フィドルのデモ。

score 4 · Accepted Answer

スニペットには複数の問題があります

ホバー関数には閉じ括弧がありません。
backgroundColorはプロパティではありません。あなたは与えるだろうbackground-color

カラーアニメーションは jquery ではサポートされていません。そのサポートについては jquery ui を確認してください http://jqueryui.com/animate/

$(document).ready(function() {
     $('#res').hover(
        function () {
            $(this).animate({"font-size": "90px" });
        },
        function () {
            $(this).animate({"font-size" : "12px" });
        }
    );
});

</p>

score 0 · Accepted Answer

アニメートを削除します

$('#res').hover(
    function () {
        $(this).css("background","#fff");
    },
    function () {
        $(this).css("background","#000");
    }
);

さらに良いのは、セレクターのクラスを変更することです

$('#res').hover(
    function () {
        $(this).addClass("on");
    },
    function () {
        $(this).removeClass("on");
    }
);

score 0 · Accepted Answer

$(document).ready(function() {
   $('#res').hover(
    function () {
        $(this).css('background-color' ,'#fff');
    },
    function () {
      $(this).css('background-color' ,'#000');
  })
});

またはこのプラグインを使用してください: http://www.bitstorm.org/jquery/color-animation/

jquery - divにホバリングするjQuery

4 に答える 4

Related

Reference