交叉淡入淡出图像javascript答案

【问题标题】：Cross fading images javascript交叉淡入淡出图像javascript
【发布时间】：2013-05-12 22:07:32
【问题描述】：

我有一张图片：

 Clown%20Fish

鼠标悬停我必须显示另一张图片：

 image.jpeg

图片上方：

 energy.jpeg

（使用 webkit-transition 显示：opacity 1s ease-in-out 属性）

我在这里得到了第一个代码表：http://css3.bradshawenterprises.com/cfimg/#comments

剂量不起作用...

这是现场演示：http://liveweave.com/6EgbYH

代码如下：

 <!DOCTYPE html>
 <html>
 <head>
 <style>

 #cfnormal {
   position:relative;
   height:281px;
   width:450px;
   margin:0 auto;
 }

 #cf {
   position:relative;
   height:10px;
   width:450px;
   margin:0 auto;
 }


 #cf img {
   position:absolute;
   left:0;
   width:450px;
   -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;
   transition: opacity 1s ease-in-out;
 }


 </style>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
 </script>

 <script>
 function change(x)
 {
var element = document.getElementById('imgtop');
element.style.opacity = "0";
 }
 </script>
 </head>

 <body>

 <div id="cf">
   <img id="imgbott" class="bottom" src="./image.jpeg" />
   <img id="imgtop" class="top" src="./energy.jpeg" />
 </div>

 <div id="cfnormal">
   <img onmouseover="change(this)" src="./Clown%20Fish.jpg" />
 </div>

 </body>
 </html>

【问题讨论】：

您能说得更清楚一点吗，我无法看到您遇到的问题是什么？例如，正在发生什么，应该发生什么或预期会发生什么，以及为什么你觉得不应该这样。
你能不能显示一个live demo，这样我们就可以看到发生了什么，你能清楚地解释这个问题吗？
那么问题是什么？
dose 不工作我看不到被隐藏的图像显示..
让this short example 工作。

标签： jquery css

【解决方案1】：

当第三张图像在鼠标悬停时触发事件时，我必须显示一个位于另一张图像上方的图像

这是正确的代码：

  <!DOCTYPE html>
  <html>
  <head>
  <style>

  #cfnormal {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }

  #cfnormal img {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }

  #cf {
    position:relative;
    height:10px;
    width:450px;
    margin:0 auto;
  }


  #cf img {
    position:absolute;
    left:0;
    width:450px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }


  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>

  <script>
  function change(x)
  {
var element = document.getElementById('imgtop');
element.style.opacity = "0";
  }
  function normalImg(x)
  {
var element = document.getElementById('imgtop');
element.style.opacity = "1";
  }
  </script>
  </head>

  <body>

  <div id="cf">
    <img id="imgbott" class="bottom" src="http://youngsskatingcenter.com/nss-            folder/pictures/Many_colors.gif" />
  <img id="imgtop" class="top"       src="http://freepages.genealogy.rootsweb.ancestry.com/~genphotos2/jwline.jpg" />
  </div>

  <div id="cfnormal">
    <img onmouseover="change(this)"  onmouseout="normalImg(this)"       src="http://www.vmapas.com/maps/2748-2/Immagine_Satellitare_Mondo_Occidentale.jpg" />
  </div>

  </body>
  </html>

【讨论】：

当第三张图片触发鼠标悬停事件时，我必须显示一个在另一张图片上方的图片好吗？