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

【问题标题】：Using JQuery or CSS how can I change the color of a box slowly on hover?使用 JQuery 或 CSS 如何在悬停时缓慢更改框的颜色？
【发布时间】：2013-05-01 15:03:29
【问题描述】：

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

我尝试使用下面的那个，但是如何在悬停时将框的颜色慢慢更改为红色？

<!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>

【问题讨论】：

bitstorm.org/jquery/color-animation 或 CSS3

标签： javascript jquery hover fadein

【解决方案1】：

使用 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;
 }

【讨论】：

这比实现 JQuery 更容易。谢谢！

【解决方案2】：

添加 jQuery UI 并为颜色设置动画：

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

jsFiddle example

【讨论】：