Menu
Below is my HTML-CSS-Jquery code. Problem: When I click on the background button, The Colour changes from Orange to Green instantly. What I want is, when I click on the Background button the background color of the div must change colour slowly. Please note that I am only permitted to use Jquery. No Other plugins may be used.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#box
{
position:absolute;
height:200px;
width:200px;
background-color:orange;
padding: 20px;
margin: 200px 200px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#width").click(function(){
$("#box").animate(
{"width": "300px"},
"slow");
});
$("#height").click(function(){
$("#box").animate(
{"height": "300px"},
"slow");
});
$("#background").click(function(){
$("#box").css("background-color","green");
});
});
</script>
</head>
<body>
<button id="width" type="button"> Width </button>
<button id="height" type="button"> Height </button>
<button id="background" type="button"> Background </button>
<div id="box">
<p>Bringing so sociable felicity supplied mr. September suspicion far him two acuteness perfectly. Covered as an examine so regular of. Ye astonished friendship remarkably no. Window admire matter praise you bed whence. </p>
</div>
</body>
</html>
521
asked Mar 20 '26 17:03
try something like this,FIDDLE
$("#background").click(function(){
$("#box").css({
transition : 'background-color 1s ease-in-out',
"background-color": "green"
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
