1

使用 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>
4

2 回答 2

4

使用 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;
 }
于 2013-05-01T15:34:33.640 回答
3

添加 jQuery UI 并对颜色进行动画处理，例如：

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

jsFiddle 示例

于 2013-05-01T15:06:39.970 回答