使用JQuery或CSS，如何在悬停时缓慢更改框的颜色？

Question

Using JQuery how can I change the color of a box slowly on hover? 使用JQuery，如何在悬停时缓慢更改框的颜色？

I tried using the one below but how do i change the color of the box to red slowly on hover? 我尝试使用下面的一个，但是如何将鼠标悬停时将框的颜色慢慢更改为红色？

<!doctype html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
    <script>
    $(document).ready( function() {
         $(".box").hover(function(){
             $(".box").fadeIn("slow");
         },
         function(){
             $(".box").fadeOut();
         });
     }
     </script>
     <style>
         .box {
             background-color: #000;
         }

</head>
<body>
    <div class="box">
         Box
    </div>
</body>
</html>

Answer 1

Using CSS3: 使用CSS3：

.box {
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;

 }
 .box:hover {
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
 }

Answer 2

Add jQuery UI and animate the color like: 添加jQuery UI并为颜色设置动画，例如：

$(".box").hover(function () {
    $(".box").fadeIn("slow").animate({
        backgroundColor: 'red'
    });
}, function () {
    $(".box").fadeOut();
});

jsFiddle example jsFiddle示例

使用JQuery或CSS，如何在悬停时缓慢更改框的颜色？

问题描述

2 个解决方案

解决方案1
4 已采纳 2013-05-01 15:34:33

解决方案2
3 2013-05-01 15:06:39

使用JQuery或CSS，如何在悬停时缓慢更改框的颜色？

问题描述

2 个解决方案

解决方案1 4 已采纳 2013-05-01 15:34:33

解决方案2 3 2013-05-01 15:06:39

解决方案1
4 已采纳 2013-05-01 15:34:33

解决方案2
3 2013-05-01 15:06:39