fadeIn DIV 影响其他 div 值

发布于 2024-11-30 10:43:47 字数 2049 浏览 1 评论 0原文

一般来说，我对 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>

原文

I'm new to jquery and javascript in general so I'm having some trouble figuring things out. Right now, I want an image to animate downward (iphone) while an image fades in (shadow) while another image animates upwards (reflection) while fading in. The code I have now just fades everything in at the same speed (doesn't matter if each div has different time values). Also, if I try to animate the reflection, it just pulls all the elements down (if I edit the start value of the div). This is probably because the reflection is the first element in the "wrap" div. I can't really change this because I want the iphone overlapping the shadow which overlaps the reflection. So, I need to initiate the reflection div first (I tried using z values which didn't work). Any tips? Here is the code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赠意 2024-12-07 10:43:47

这里有几个问题，虽然我认为你已经接近了......

确保你的 HTML 格式良好，并且 div 元素打开和关闭
不使用 -1 的 z-index，每个元素仅使用正值（我通常将它们间隔 5 级左右）
应用“position:relative;”到#right，手动设置高度和宽度，然后让#reflection、#shadow、#iphone都“position:absolute;”所以动画时一切都不会移动（只需确保这适用于您的页面布局）

回复收藏 0 原文

~没有更多了~