jquery - CSS 淡化多个图像。延迟不透明度过渡。 Webkit 转换延迟

标签 jquery css css-transitions fadein opacity

我正在尝试淡入 3 张堆叠在一起的图像。仅使用 CSS 过渡。

这是我的代码笔:

http://codepen.io/FredHair/pen/MYQZJv?editors=110

我已经设法淡入第一张图片,但不确定如何正确地延迟和淡入第三张图片。

我在这里发现了很多与此类似的问题,但没有一个能帮助我破译实现此目标所需的确切代码。

我的代码:

HTML

<body>
 <div id="fadeImage">
<img id="image1" src="http://testdigits.com/wp-   content/uploads/2015/02/OpacAnimFrame1.png" alt="OpacAnimFrame1" >
<img id="image2" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame2.png" alt="OpacAnimFrame2" >
<img id="image3" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame3.png" alt="OpacAnimFrame3" >
</div>

CSS

#image1{
position: absolute;
left: 200px;
z-index: 3;
}

#image2{
 position: absolute;
 left: 200px;
z-index: 2;
}

#image3{
position: absolute;
left: 200px;
z-index: 1;
}

#image1:hover{
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
opacity: 0;
transition-delay:1s;
}

#image2:hover {
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
opacity: 0;
transition-delay:3s;
}
}

我希望最好只使用 CSS 来实现这一点,但如果您知道一个简单的 jQuery 修复程序,我也希望看到它。

谢谢你的帮助

B先生

最佳答案

您需要在 #fadeImage 而不是单个图像上设置 :hover。这是我的解决方案:

#fadeImage {
  position: relative;
}

#fadeImage img {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 1;
  transition: opacity 1s linear;
}

#image1 {
  z-index: 3;
}

#image2 {
  z-index: 2;
}

#image3 {
  z-index: 1;
}

#fadeImage:hover #image1 {
  opacity: 0;
}

#fadeImage:hover #image2 {
  opacity: 0;
  transition-delay: 3s;
}
<div id="fadeImage">
  <img id="image1" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame1.png" alt="OpacAnimFrame1" >
  <img id="image2" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame2.png" alt="OpacAnimFrame2" >
  <img id="image3" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame3.png" alt="OpacAnimFrame3" >
</div>

关于jquery - CSS 淡化多个图像。延迟不透明度过渡。 Webkit 转换延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28541656/

相关文章:

javascript - 禁用过渡动画

javascript - jQuery 求和单选按钮值和文本输入值?

jquery - 更新到最新的 JQuery UI 和日期选择器导致日期选择器始终可见

Jquery select2 ajax 链式选择

javascript - 具有变量和多个值的 jQuery .css() 函数

css - 具有生成内容/伪元素的转换元素不遵守 z-index

javascript - HTML 行不显示在浏览器中

悬停时的 CSS 样式

jquery - 模态关闭动画

css - 卡背隐藏在 chrome 的第一次转换中