Help with fade in-fade out jquery script
I have a div portion in my web page. I want to change the background -image of the div dynamically and then do a fade-in effect using jquery. But i cannot change the background-image of the div.
Here is my script
<html>
<head><title> Animate </title>
<style type="text/css">
#content {
height: 200px;
width: 1000px;
background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
image_src=new Array();
for(i=1;i<=4;i++)
{
image_src[i]= new Image();
image_src[i].src="pic-"+i+".jpg";
}
number=1;
$(document).ready(motion);
function motion(){
if(number>4)
{
number=1;
content.background-image.url("image_src[number].src");
display();
}
else {
content.background-image.url("image_src[number].src");
display();
}
}
function display()
{
$("#content").fadeOut(5000);
$("#content").fadeIn(3000);
motion();
}
</script>
</head>
<body>
<div id="content" >
</div>
</body>
</html>
I have four pics which i want to put in the div area dynamically. But this is not working. Any help is truly appreciated.
Thnx