As a newcomer to jquery and JavaScript, I'm facing some challenges in getting the desired functionality. Currently, I am trying to animate three images simultaneously - one moving downward (iphone), another fading in (shadow), and the third one animating upwards while fading in (reflection). However, my code is making all elements fade in at the same speed, despite having different time values for each div. Additionally, when I attempt to animate the reflection, it pulls down all the elements if I modify the start value of the div. This issue seems to stem from the reflection being the first element in the "wrap" div. While I want the iphone overlapping the shadow and reflection, changing this order doesn't seem feasible. So, how can I trigger the reflection div first? I tried using z-values but that didn't work. Any suggestions?
<!DOCTYPE html>
<html lang="en>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel=StyleSheet href="external_style_sheet.css" type="text/css">
<script type="text/javascript">
$(function() {
$('#iphone').animate({"top" : "1000px"}, 1200);
$('#shadow').fadeIn(1800);
$('#reflection').fadeIn(1800);
});
</script>
</head>
<body id="index" class="home">
<div id="wrap" >
<div id="left" />
<div id="right" >
<div id="reflection" />
<div id="shadow" />
<div id="iphone" />
</div>
</body>
</html>
And the CSS
`p {font-family: georgia, serif; font-size: x-small;}
hr {color: #000000; height: 1px }
a:hover {color: #ff0000; text-decoration: none}
body {
background-color:#1b1a1f;
}
#reflection {
margin-top:0px;
margin-left: 400px;
position:relative;
width: 414px;
height: 993px;
background-image: url("images/reflection2.png");
display: none;
z-index: -1;
}
#shadow {
margin-top:0px;
margin-left: 0px;
position:absolute;
width: 414px;
height: 818px;
background-image: url("images/shadow3.png");
display: none;
z-index: 1;
}
#iphone {
margin-top:-1000px;
margin-left: 0px;
position:relative;
width: 414px;
height: 818px;
background-image: url("images/iphone_2.png");
z-index: 0;
}
#wrap {
width:800px;
margin:0 auto;
background-image: url("images/logo.png");
}
#left {
float:left;
width:500px;
}
#right {
float:right;
width:500px;
}
HTML
<div id="bar">Content</div>