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

Question

我需要将带有背景图像的 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();
}

Answer 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/

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

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

jQuery crossfade images and hide them with display:none

css

jquery

fade

opacity