このスクリプトで何が問題なのか分かりませんが、うまく動作しないようです。何が起こるのかは、ボックスがマウスセンター/退室に従って色を出し入れすることです。Jquery animate on mouseenter
$(document).ready(function() {
$('.square-box').mouseenter(function() {
$(this).animate({
background-color: '#AAAAAA'
}, 1000);
});
$('.square-box').mouseleave(function() {
$(this).animate({
background-color: '#CCCCCC'
}, 1000);
});
});
https://jsfiddle.net/k9met5oz/
私が間違って何をしているのですか？おかげさまで
属性のみを数値でアニメーション表示できます。しかし、このプラグインhttps://github.com/jquery/jquery-color/をカラーアニメーションに使用できます。 これを試してみてください：
$(document).ready(function() {
$('.square-box').mouseenter(function() {
$(this).animate({
"backgroundColor": '#AAAAAA'
}, 1000);
});
$('.square-box').mouseleave(function() {
$(this).animate({
"backgroundColor": '#CCCCCC'
}, 1000);
});
});.square-box {
width: 200px;
height: 200px;
line-height: 200px;
cursor: pointer;
background-color: #CCC;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js"></script>
<div class="square-box">TEST BOX</div>私はこれを答えとして受け入れましたが、jquery UIには色のアニメーションがあることがわかりました。私はui（またはこの例のプラグイン）を含める必要があります。 – FoxyFish
はあなたがCSSプロパティを変更すると、それを行うことができますあなたのようなanimate colors by default in jquery
できないようです。
$(document).ready(function() {
$('.square-box').mouseenter(function() {
$(this).css({
"background-color": "#aaa"
});
}).mouseleave(function() {
$(this).css({
'background-color': '#CCCCCC'
})
});
});.square-box {
width: 200px;
height: 200px;
line-height: 200px;
cursor: pointer;
background-color: #CCC;
text-align: center;
transition: 1s all;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='square-box'>
TEST BOX
</div>jqueryのは、デフォルトでは、色をアニメーション化することはできません。しかし、プラグインは必要ありません。あなたは、はるかに容易CSSトランジションでこれを行うことができます。
.square-box {
width: 200px;
height: 200px;
line-height: 200px;
cursor: pointer;
background-color: #CCC;
text-align: center;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
.square-box:hover {background:#AAAAAA}<div class='square-box'>
TEST BOX
</div>
あなたはより良い最初にあなたのフィドルにjqueryのを追加します:) – bhansa
笑ええ、私は私が作ったUIを実現したときに、それを追加した後、thatsのことを実現しましたそれは働く。 – FoxyFish