Question

我今天是第一次使用JQuery用户。我已经设法弄清楚如何工作足以做我想要的，这会改变按钮背景的颜色。

唯一的问题是没有褪色效果。我已经查找了fadein函数，但我不确定如何将其实现到目前为止我所做的事情，因为语法与我习惯的语法非常不同。任何人都可以帮我弄清楚如何将fadein函数添加到我的代码中吗？

谢谢！期待回复！：）

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>index.html</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="bgcolor.js"></script>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>

<body>

<div class='splash'>

    <div id='logoblock'>
        <img src='images/logo.png'>
    </div>

    <div id='menublock'>
        <a href='#' id='jabout'><div id='about'></div></a>
        <a href='#' id='jphoto'><div id='photo'></div></a>
        <a href='#' id='jinfo' ><div id='info'></div></a>
    </div>

    <div id='quoteblock'
        <p class=quote>"blah blah blah!"</p>
        <p class=author>- John Doe</p>
    </div>

</div>

</body>
</html>

bgcolor.js

// JavaScript Document

$(document).ready(function(){

$( "#jphoto" ).hover(
    function() {
        $('body').css('background', '#9dd5fc');
    },
    function() {
        $('body').css('background', '#d4e88f');
    }   
);

$( "#jabout" ).hover(
    function() {
        $('body').css('background', '#ffaf3c');
    },
    function() {
        $('body').css('background', '#d4e88f');
    }
);

$( "#jinfo" ).hover(
    function() {
        $('body').css('background', '#ff3c3c');
    },
    function() {
        $('body').css('background', '#d4e88f');
    }   
);

});

Answer 1

您需要使用animate()来获得动画效果，还需要jquery UI / color库才能使用背景色动画

$("#jinfo").hover(function () {
    $('body').animate({
        'background-color': '#ff3c3c'
    });
}, function () {
    $('body').animate({
        'background-color': '#d4e88f'
    });
});

演示：Fiddle

如何淡化jquery背景颜色

1 个答案: