How to fadein jquery background color

StackOverflow https://stackoverflow.com/questions/23464547

質問

I am first time JQuery user today. I have managed to figure out how to work it enough to do what I want, which is change the color of the background onhover of button.

Only problem is that there is no fadein effect. I have looked up the fadein function but am not sure how to implement it into what I have done so far because the syntax is very different from what I am used to. Can anyone help me figure out how to add the fadein function to my code?

Thanks! Looking forward to replies! :)

<!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');
    }   
);

});
役に立ちましたか？

解決

You need to use animate() to have animation effect, also need to have jquery UI/color library for background color animation to work

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

Demo: Fiddle

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top