Question

我一般都是jquery和javascript的新手，所以我在解决问题时遇到了一些麻烦。现在，我想要一个图像向下动画（iphone），同时图像淡入（阴影），而另一个图像向上动画（反射）同时淡入。我现在的代码只是以相同的速度淡化一切（不是重要的是每个div有不同的时间值）。此外，如果我尝试动画反射，它只会拉下所有元素（如果我编辑div的起始值）。这可能是因为反射是“wrap”div中的第一个元素。我无法真正改变这一点，因为我希望iphone重叠与反射重叠的阴影。所以，我需要首先启动反射div（我尝试使用不起作用的z值）。有小费吗？这是代码：

<!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>

和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>

Answer 1

这里有一些问题，但我认为你很接近......

确保您的HTML格式正确且div元素打开和关闭
不要使用-1的z-index，只使用每个元素的正值（我通常将它们间隔5个左右）
申请“职位：亲属;” #right，手动设置高度和宽度，然后#reflection，＃shadow和#iphone all“position：absolute;”所以在制作动画时一切都不会转移（只是确保这适用于您的页面布局）

fadeIn DIV影响其他div值

1 个答案: