I've a problem with my code. I suppose that the draggable items disable the links inside my page.
I've try and I want use this code inside an IOS phonegap app.
The two links inside the "navigation" div appear disabled in IOS.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-touch-fullscreen" content="yes" />
<script type="text/javascript" src="game1js/head.min.js"></script>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
$(document).ready(function() { $("#win").delay(13000).fadeOut(3000); });
</script>
<link rel="stylesheet" type="text/css" href="game1css/style.css" />
<style>body {
background-image: url("img/game1_bkg.jpg"); background-repeat:no-repeat; overflow: hidden;
} </style>
</head>
<body>
<div id="touchme1" class="touchBox"><img src="img/game1_1.png"/></div>
<div id="touchme2" class="touchBox"><img src="img/game1_2.png"/></div>
<div id="touchme3" class="touchBox"><img src="img/game1_0.png"/></div>
<div id="touchme4" class="touchBox"><img src="img/game1_3.png"/></div>
<div id="touchme5" class="touchBox"><img src="img/game1_4.png"/></div>
<div id="touchme6" class="touchBox"><img src="img/game1_5.png"/></div>
<div id="touchme7" class="touchBox"><img src="img/game1_6.png"/></div>
<div id="touchme8" class="touchBox"><img src="img/game1_7.png"/></div>
<div id="touchme9" class="touchBox"><img src="img/game1_8.png"/></div>
<div id="touchme10" class="touchBox"><img src="img/game1_9.png"/></div>
<div id="win" style="margin: auto; position: absolute;bottom: 0;left: 0;top: 0;right: 0; z-index:100;"><img src="img/start.png" id="messageWin"></div>
<div id="drop" class="dropArea"><b>Trascina qui i numeri</b><br><div id="n1" style="float:left;"></div><div id="n2" style="float:left;"></div></div>
<script>
head.js("game1js/jquery.min.js","game1js/ui.js","game1js/touch.js", function (){
$("#touchme1, #touchme2, #touchme3, #touchme4, #touchme5, #touchme6, #touchme7, #touchme8, #touchme9, #touchme10").draggable({revert:true});
var sum=0;
$("#drop").droppable({
drop: function( event, ui ) {
console.log($(ui.draggable).attr("id"));
if($(ui.draggable).attr("id")=="touchme1"){
document.getElementById("n1").innerHTML = "<img src='img/game1_1.png'/>";
sum++;
$(ui.draggable).remove();
}
if($(ui.draggable).attr("id")=="touchme9"){
document.getElementById("n2").innerHTML = "<img src='img/game1_8.png'/>";
sum++;
$(ui.draggable).remove();
}
if($(ui.draggable).attr("id")!="touchme1" && $(ui.draggable).attr("id")!="touchme9"){
//$(ui.draggable).remove();
}
if (sum==2){
document.getElementById('messageWin').src="img/end.png";
$("#win").delay(100).fadeIn(3000);
document.getElementById('myAudio').src="../audio/01_end.mp3";
document.getElementById('myAudio').play();
localStorage.setItem('level1', 1);
setTimeout(function() {window.location.href='../index.html';},10000);
}
$(this).css({'border':'#777 dashed 3px', 'background':'transparent'});
},
over: function(event, ui) {
$(this).css({'border':'#a33 dashed 3px','background':'#eee'});
},
out: function (event, ui){
$(this).css({'border':'#777 dashed 3px', 'background':'transparent'});
}
});
});
</script>
<div style="visibility: hidden;"><audio src="../audio/01_instructions.mp3" autoplay controls="false" id="myAudio"></div>
<div id="navigation" style="z-index:100; position: absolute; top: 650px; left: 455px;">
<img src="../img/left.png" width="64px">
<img src="../img/reload2.png" width="64px">
</div>
</body>
</html>
Do you have an idea to fix the code ?
Thanks.
Related
I am trying to create a quiz game that allows the user to simply click on an image as their answer.
I
function checkimage(){
}
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:50px;
background-color:rgba(255, 128, 0, 0.54);
text-align: center
}
h2{
padding: 10px;
background-color: red;
}
#container{
margin : 20px auto;
background-color: white;
height: 60%;
width : 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px 0px;
position: relative;
}
*{
box-sizing: border-box;
}
.column{
float:left;
width:100%;
padding:5px;
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" href="game.css">
</head>
<body>
<h1> Welcome to the Shopping Quiz Game</h1>
<div id="container">
<div class = "question">
<h2>which of the following is a fruit? click on the image </h2>
<div class = "quiz">
<div class="column">
<input type="image" id="forest" src="forest.jpg" style="width:50%"> </div>
<input type="image" id="snow" src="snow.jpg" style="width:50%"
onclick="checkimage"> </div>
</div>
</div>
<div>
<script src="game.js"></script>
</div>
</body>
</html>
have tried firstly to make the images into buttons which worked because they are clickable.However, i have very basic javascript knowledge and i am not able to do the "on-click" function that once the user clicks the image, the program will check if the image clicked is the right answer and then return a message.
You can get id value when an image got clicked and then you can compare with your original answer to check whether it's right or not.
function checkimage(element) {
var rightAns = "Apple";
if (element.id == rightAns) {
alert("You selected right ans!")
} else {
alert("You selected wrong ans!")
}
}
<h3>Which image is of an apple?</h3>
<input type="image" id="Apple" src="https://www.organicfacts.net/wp-content/uploads/apple.jpg" style="width:25%;height:25%;" onclick="checkimage(this)"></div>
<input type="image" id="Watermelon" src="https://snaped.fns.usda.gov/sites/default/files/styles/crop_ratio_7_5/public/seasonal-produce/2018-05/watermelon.jpg?itok=6EdNOdUo" style="width:25%;height:25%;" onclick="checkimage(this)"></div>
Note that here i am passing reference of an image element to the
javascript function on click event like
'onclick="checkimage(this)"' where 'this' is a reference.
Hello this is simple if i understood correctly, you need to use hidden values in your html code for example:
//OPTION 1:
<img src="IMAGE_PATH_HERE" onClick='answerIs('id_here_or_answer_here')'/>
//OPTION 2:
using hidden values
<input type='hidden' value='id_here_or_answer' id='answer_{id should be unique}'/>
Finally if you are using a loop you could use any option with uniques ID in order to make it work:
function checkimage(id){
$answer = $('#answer_'+id).val().toString;
}
//or while//
for ($i; $i>=10; $i++){
//input or image as you wish
//<inputs OR <img TAGS
<input type='hidden' value='id_here_or_answer' id='answer_<?= $i; ?>' onClick='checkimage('<?= $i; ?>');return false;'/>
}
//end//
in fact, you are telling to the JS what ID is the real answer even if you have a lot of options
USAGE in your case:
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" href="game.css">
<script>
$( document ).ready(function() {
console.log( "ready!" );
function checkimage(value){
alert('answer is:' + value);
if (value == "apple"){
//do something
}else{
//optionally do something here too
}
}
});
</script>
</head>
<body>
<h1> Welcome to the Shopping Quiz Game</h1>
<div id="container">
<div class = "question">
<h2>which of the following is a fruit? click on the image </h2>
<div class = "quiz">
<div class="column">
<input type="image" id="forest" src="forest.jpg" style="width:50%" onClick="checkimage('apple');return false;"> </div>
<input type="image" id="snow" src="snow.jpg" style="width:50%"
onClick="checkimage('banana');return false;"> </div>
</div>
</div>
<div>
<script src="game.js"></script>
</div>
function checkimage(id){
$answer = $('#answer_'+id).val().toString;
}
//or while//
for ($i; $i>=10; $i++){
//input or image as you wish
<inputs OR <img TAGS
<input type='hidden' value='snow' id='snow_<?= $i; ?>' onClick='checkimage('<?= $i; ?>');reuturn false;'/>
}
//end//
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:50px;
background-color:rgba(255, 128, 0, 0.54);
text-align: center
}
h2{
padding: 10px;
background-color: red;
}
#container{
margin : 20px auto;
background-color: white;
height: 60%;
width : 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px 0px;
position: relative;
}
*{
box-sizing: border-box;
}
.column{
float:left;
width:100%;
padding:5px;
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<script>function checkimage(value)</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1> Welcome to the Shopping Quiz Game</h1>
<div id="container">
<div class = "question">
<h2>which of the following is a fruit? click on the image </h2>
<div class = "quiz">
<input type="image" id="snow" src="snow.jpg" style="width:50%" onclick="checkimage('snow');return false;"></div>
<input type="image" id="forest" src="forest.jpg" style="width:50%" onclick="checkimage('forest');return True;"> </div>
</div>
<div>
<script src="test.js"></script>
</div>
</body>
</html>
I cannot for the life of me figure out why the text under Sub1 and Sub2, do not show the text under them, when clicking them. Only the first link "Main Category" functions. It is making me enter more description, though the issue is already explained the best I know how.
<!DOCTYPE html>
<?php
session_start();
print "
<html>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#body {
font-family: 'Helvetica', Arial, sans-serif;
display:none;
width: 100%;
padding: 5px 0;
text-align: left;
background-color: lightblue;
margin-top: 5px;}
</style>
</head>
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
</script>
</body>
</html>
You have a typo in your JS $('.commentsTitle').click(...
In the html you assigned the class commentsTitle, in the JS, you referred to commentTitle.
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentsTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentsTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
</body>
</html>
I have simple list number slider with fade effect. I need to add bullet navigation to control the slider. Pls help me to do so.
jsFiddle Demo
Here is my code :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Slider</title>
<style id="jsbin-css">
.testimonials .quote {
display: none;
}
</style>
</head>
<body>
<div class="testimonials">
<div class="quote">1</div>
<div class="quote">2</div>
<div class="quote">3</div>
<div class="quote">4</div>
<div class="quote">5</div>
<div class="quote">6</div>
<div class="quote">7</div>
<div class="quote">8</div>
<div class="quote">9</div>
<div class="quote">10</div>
</div>
<script>
$(function () {
(function anim(num, delay) {
$('.testimonials .quote')
.slice(0,num)
.fadeIn()
.delay(delay)
.fadeOut()
.promise()
.done(function () {
$('.testimonials').append(this);
anim(num, delay);
});
}(2, 2000));
});
</script>
</body>
</html>
I try to blow up a video in the JPlayer Playlist to fullscreen (full size). But the size always stays the same.
Here the source:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test Playlist</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jplayerd/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="jplayerd/js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cssSelector = {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
};
$("#jquery_jplayer_1").jPlayer("option", {"fullScreen": true});
var playlist = [
{
title:"Big Buck Bunny Trailer",
artist:"Blender Foundation",
m4v:"http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
}
];
var options = {
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
sizeFull: {
width: this.windowWidth,
height: this.windowHeight
},
swfPath: "jplayerd/js",
supplied: "m4v",
fullScreen: true
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
});
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video jp-video-full">
<div class="jp-type-playlist">
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 100%; height: 100%;"></div>
</div>
<div class="jp-playlist" style="display:none;">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Unable to play your Video</span>
</div>
</div>
</body>
</html>
In the HTML I see that there is a style on the element that just always stays the same. 480px x 270px. I tried to add a style with a different size but it seems that it is always overwritten.
<div id="jp_container_1" class="jp-video jp-video-full jp-video-270p">
<div class="jp-type-playlist">
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 480px; height: 270px;">
<img id="jp_poster_0" style="width: 480px; height: 270px; display: none;">
<object id="jp_flash_0" width="1" height="1" name="jp_flash_0" data="jplayerd/js/Jplayer.swf" type="application/x-shockwave-flash" tabindex="-1" style="width: 480px; height: 270px;">
</div>
</div>
If I use only the Jplayer without the playlist following code is working:
<html>
<head>
<meta charset=utf-8 />
<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as a video player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="jplayerd/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="jplayerd/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
})
.jPlayer("option", {"fullScreen": true})
.jPlayer("play");
},
swfPath: "jplayerd/js",
supplied: "m4v",
size: {
width: "640px",
height: "360px",
cssClass: "jp-video-360p"
},
sizeFull: {
width: this.windowWidth,
height: this.windowHeight
},
smoothPlayBar: true,
keyEnabled: true
});
});
//]]>
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video jp-video-360">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
play
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</body>
</html>
It seems like the fullScreen option is not correctly parsed to the player. Can somebody tell me how I can get this working with the playlist addon?
I'm using JPlayer 2.5.0.
Remove the line fullscreen: true from your options variable
New code
var options = {
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
sizeFull: {
width: this.windowWidth,
height: this.windowHeight
},
swfPath: "jplayerd/js",
supplied: "m4v"
};
Working Demo
Refer more from here for jplayer playlist
I have a menu on my webpage that I want to fade out the background of it but not the text. Here is the table for the menu, the jQuery and the CSS.
The Body/Table:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#menu {
width:900px;
margin-left:auto;
margin-right:auto;
font-family:"britannic bold";
font-size:200%;
}
#allbodies {
width:900px;
margin-left:auto;
margin-right:auto;
}
#menu table tr td:hover {
color:#fff;
}
</style>
<title></title>
</head>
<body>
<div id="menu">
<table>
<tr>
<td id="logo" style="width:150px;height:200px;">
<img alt="Logo" height="200" src="logo.jpg" width="150">
</td>
<td id="home" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">HOME</p>
</td>
<td id="games" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">GAMES</p>
</td>
<td id="about" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">ABOUT</p>
</td>
<td id="contact" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">CONTACT</p>
</td>
<td id="author" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">AUTHOR</p>
</td>
</tr>
</table>
</div>
<div id="allbodies">
<div id="homebody">
<h1>Home</h1>
</div>
<div id="gamesbody">
<h1>Games</h1>
</div>
<div id="aboutbody">
<h1>About</h1>
</div>
<div id="contactbody">
<h1>Contact</h1>
</div>
<div id="authorbody">
<h1>Author</h1>
</div>
</div>jQuery:
<script>
$(function(){
$("#logo").mouseenter(function(){
$("#logo").fadeTo("fast",1.0);
});
$("#logo").mouseleave(function(){
$("#logo").fadeTo("fast",0.5);
});
$("#home").mouseenter(function(){
$("#home").fadeTo("fast",1.0);
});
$("#home").mouseleave(function(){
$("#home").fadeTo("fast",0.5);
});
$("#games").mouseenter(function(){
$("#games").fadeTo("fast",1.0);
});
$("#games").mouseleave(function(){
$("#games").fadeTo("fast",0.5);
});
$("#about").mouseenter(function(){
$("#about").fadeTo("fast",1.0);
});
$("#about").mouseleave(function(){
$("#about").fadeTo("fast",0.5);
});
$("#contact").mouseenter(function(){
$("#contact").fadeTo("fast",1.0);
});
$("#contact").mouseleave(function(){
$("#contact").fadeTo("fast",0.5);
});
$("#author").mouseenter(function(){
$("#author").fadeTo("fast",1.0);
});
$("#author").mouseleave(function(){
$("#author").fadeTo("fast",0.5);
});
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
$("#home").hide();
$("#games").hide();
$("#about").hide();
$("#author").hide();
$("#contact").hide();
$("#homebody").hide();
$("#homebody").fadeTo("slow",1.0);
$("#home").fadeTo("slow",0.5);
$("#games").fadeTo("slow",0.5);
$("#about").fadeTo("slow",0.5);
$("#author").fadeTo("slow",0.5);
$("#contact").fadeTo("slow",0.5);
$("#logo").hide();
$("#logo").fadeTo("slow",0.5);
$("#menutext").fadeTo("slow",1.0);
$("#home").click(function(){
$("#home").fadeIn("slow");
$("#homebody").fadeIn("slow");
$("#homebody").show();
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
});
$("#about").click(function(){
$("#about").fadeIn("slow");
$("#aboutbody").fadeIn("slow");
$("#aboutbody").show();
$("#gamesbody").hide();
$("#homebody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
});
$("#contact").click(function(){
$("#contact").fadeIn("slow");
$("#contactbody").fadeIn("slow");
$("#contactbody").show();
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#homebody").hide();
});
$("#author").click(function(){
$("#author").fadeIn("slow");
$("#authorbody").fadeIn("slow");
$("#authorbody").show();
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#homebody").hide();
$("#contactbody").hide();
});
$("#games").click(function(){
$("#games").fadeIn("slow");
$("#gamesbody").fadeIn("slow");
$("#homebody").hide();
$("#gamesbody").show();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
});
});
</script>
</body>
You can use this code (Provided by jQuery ui web site) to find your way:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Animate demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
var state = true;
$( "#button" ).click(function() {
if ( state ) {
$( "#effect" ).animate({backgroundColor: "#aa0000"}, 1000 );
} else {
$( "#effect" ).animate({backgroundColor: "#fff"}, 1000 );
}
state = !state;
});
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Animate</h3>
<p>Just a line of text</p>
</div>
</div>
Toggle Effect
</body>
</html>
As you can see in this example, you can use $("#elementid").animate({backgroundColor: "#fff"}, 1000 ); to animate (fade in or out) the background color of your element.
You can find the full example here: http://jqueryui.com/animate/
You cannot use fadeTo() for this because it changes the opacity, and the opacity of a child cannot be different than the opacity of its parent.
You can, however, animate the background color, but you need to include the jquery UI library to do so.
Also, you do not have to choose two different background colors. Instead, you can set an opacity value for the background color.
The code to animate would look like this:
$("#parent").mouseenter(function () {
$(this).animate({ backgroundColor: 'rgba(64, 64, 64, 1)' }, 'fast');
});
$("#parent").mouseleave(function () {
$(this).animate({ backgroundColor: 'rgba(64, 64, 64, 0.5)' }, 'fast');
});
With the CSS like this:
#parent {
background-color: rgba(64, 64, 64, 0.5);
}
jsfiddle demo