Jquery在mouseenter上進行動畫制作

Question

我不確定這個腳本有什么問題，但它似乎並不想工作。 意味着盒子應該根據mouseenter / leave來淡入和淡出顏色。

$(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/

我究竟做錯了什么？ 謝謝。

Answer 1

您只能使用數值為屬性設置動畫。 但您可以使用此插件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> 

Answer 2

看起來你不能在jquery中默認為顏色設置動畫

你可以通過改變css屬性來做到這一點。

 $(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> 

Answer 3

默認情況下，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>