web-dev-qa-db-ja.com

CSSとjQueryを使用してマウスの離脱をアニメーション化しますか？

CSSトランジションを使用して、マウスホバーの背景色をアニメーション化しています。

私は次のコードを持っています：

div {
  width: 100px;
  height: 100px;
  background: red;
}

div:hover {
  background: green;
  transition: all 0.5s ease-in-out;
}
<div></div>

このコードは、マウスをオンにしたときにのみ背景色をアニメーション化します。マウスを元に戻すことはできません。 2つの質問があります。

  1. CSSを使用してマウスをアニメーション化するにはどうすればよいですか？

  2. jQueryのみを使用してこれを行うにはどうすればよいですか？

jsfiddle： http://jsfiddle.net/fz39N/

jqueryhtmlcsscss-transitions
14
It worked yesterday.

1）あなたのCSSをに変更します

div {
    width: 100px;
    height: 100px;  
    background: red;
    transition: background 0.5s ease-in-out;
}

div:hover {
    background: green;

}

[〜＃〜]フィドル[〜＃〜]

遷移を要素に設定します。疑似クラスではありません。

2）

JQueryを使用するには、クロスフェードする2つの要素、またはカラーアニメーションプラグインが必要です。 jQuery UIにはカラーアニメーションが組み込まれており、次のことができます。

$('div').on({
    mouseenter: function() {
        $(this).animate({backgroundColor: 'green'},1000)
    },
    mouseleave: function() {
        $(this).animate({backgroundColor: 'red'},1000)
    }
});

[〜＃〜]フィドル[〜＃〜]

まだ何かjQuery UIを使用していない場合は、 this one !!

24
adeneo

これはあなたの問題を解決するはずです

div {
    width: 100px;
    height: 100px;  
    background-color: red;
    transition: background-color 0.5s;
}

div:hover {
    background-color: green;
}
3
mohkhan