jQuery 淡入淡出图像并使用 display:none 隐藏它们

Posted 2023-03-06

【中文标题】jQuery 淡入淡出图像并使用 display:none 隐藏它们

【英文标题】：jQuery crossfade images and hide them with display:none

【发布时间】：2015-05-24 14:16:11

【问题描述】：

我需要将具有背景图像的 div 淡化为同一容器中具有固定尺寸的另一个。

FadeIn 和 Out 是我需要的，而且效果很好，因为我希望能够点击每个可见图像，而使用不透明度是不可能的，即使这正是我想要的效果......图像之间的交叉淡入淡出。

html

<div class="image_container">
    <div id="image1"></div>
    <div id="image2" style="display:none"></div>
</div>

我的简化 js

$( this ).click(function() 
  $( "#image1" ).fadeOut();
   $( "#image2" ).fadeIn();

【问题讨论】：

你能做一个jsfiddle吗？

Crossfade 是什么意思？你的意思是如果你点击image1，image2应该fadeIn和image1应该fadeOut，反之亦然点击image2？

【参考方案1】：

通过将图像放置在绝对位置上，您可以使用 jQuery 在它们之间淡入淡出，如下所示：

<div class="image_container">
  <div id="image1"></div>
  <div id="image2" style="display:none"></div>
</div>

<script type="text/javascrtip">
  $(".image_container").click(function()
    $(this).find("div").fadeOut();
    $(this).find("div:hidden").fadeIn();
  )
</script>

<style type="text/css">
  .image_container div 
    position:absolute;
    width:338px;
    height:225px;
    top:0;
    left:0;
  

  #image1 
    background-image:url(http://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg);
  

  #image2 
    background-image:url(http://imaging.nikon.com/lineup/dslr/df/img/sample/img_02.jpg);
  
</style>

这里有一个 Fiddle 来演示：https://jsfiddle.net/zmur2v8q/1/

只需点击图片即可淡入另一张图片。

【讨论】：

我想过，但是绝对定位在某些布局中实际上是不舒服的。没有绝对的方法可以做到这一点吗？

如果您知道图像尺寸，您可以做一个相对位置并使用负边距。但是，如果您将绝对定位的 div 放在相对定位的 div 中，那么大多数布局通常都可以。如果不了解您的具体问题，很难提供更多信息。

其实挺好看的，谢谢。我发现我在同一个类上的 CSS 转换有问题，这在 jQuery 淡入淡出时工作得非常糟糕