在鼠標中心上的jquery動畫

我不確定這個腳本有什麼問題，但它似乎並不想工作。要實現的目標是，根據鼠標輸入/離開，該框應該淡入淡出。在鼠標中心上的jquery動畫

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

我到底做錯了什麼？謝謝。

來源

2017-09-24 FoxyFish

你最好在你的小提琴先加入jQuery的:) – bhansa

哈哈是啊，我意識到，加入之後，這就是當我意識到所做的UI這行得通。 – FoxyFish

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

來源

2017-09-24 14:06:36

我接受這個答案，因爲它確實有效，但是我發現jquery ui有顏色動畫，我只需要包含ui（或者你的例子中的這個插件）。 – FoxyFish

好像你不能animate colors by default in 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>

來源

2017-09-24 14:10:47 bhansa

雖然不動畫，但它只是瞬間。 – FoxyFish

@FoxyFish現在檢查，我在CSS中添加動畫。 – bhansa

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>

來源

2017-09-24 17:16:18

在鼠標中心上的jquery動畫

回答

相關問題