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 に答える