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