JQuery，平滑交换图像答案

【问题标题】：JQuery, swap image smoothlyJQuery，平滑交换图像
【发布时间】：2018-10-23 21:00:51
【问题描述】：

我在更改图像时遇到问题。它改变了，但并不顺利。我需要的正是 jquery，而不是 css 方法，因为我需要更改 img 属性。

我的尝试

$("#klubnika").hover(function() {
  $("#klubnika").attr("src","img/team-section/banka-klub.jpg");
    },function() {
      $("#klubnika").attr("src","img/team-section/klubnika.jpg");
    }
);

任何想法，如何使交换效果顺利？

【问题讨论】：

“顺利”到底是什么意思？你的意思是你想让它在两者之间消失吗？另外，使用 CSS3 动画不是更好吗？
如果您的问题是新图像在您交换时加载，请先将其加载到 tmp/invisible img 标签，然后在加载时交换它们

标签： jquery

【解决方案1】：

我真的会为此使用两张图片并使用这种方式：

#klubnika {position: relative; display: inline-block; cursor: pointer;}
#klubnika img {display: block;}
#klubnika img.off {position: absolute; z-index: 1; left: 0; top: 0; opacity: 0; transition: opacity 0.5s linear;}
#klubnika:hover img.off {opacity: 1;}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="klubnika">
  <img src="//placehold.it/200x100?text=Hello" class="on" />
  <img src="//placehold.it/200x100?text=World" class="off" />
</div>

如果您出于某种原因讨厌基于 CSS 的方法，您可以使用 jQuery 使用 fadeIn() 和 fadeOut() 并建议使用 HTML5 数据属性 进行缩放：

$(function () {
  $("#klubnika").hover(function () {
    $(this).find("img").fadeOut(function () {
      this.src = $(this).data("hover");
      $(this).fadeIn();
    });
  }, function () {
    $(this).find("img").fadeOut(function () {
      this.src = $(this).data("src");
      $(this).fadeIn();
    });
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="klubnika">
  <img src="//placehold.it/200x100?text=Hello" data-src="//placehold.it/200x100?text=Hello" data-hover="//placehold.it/200x100?text=World" />
</div>

通过缩放，我的意思是，您可以拥有任意数量的图像，但只有一个 JavaScript 代码可以使其工作。见下文：

$(function () {
  $(".klubnika").hover(function () {
    $(this).find("img").fadeOut(function () {
      this.src = $(this).data("hover");
      $(this).fadeIn();
    });
  }, function () {
    $(this).find("img").fadeOut(function () {
      this.src = $(this).data("src");
      $(this).fadeIn();
    });
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="klubnika">
  <img src="//placehold.it/200x100?text=Hello" data-src="//placehold.it/200x100?text=Hello" data-hover="//placehold.it/200x100?text=World" />
</div>
<div class="klubnika">
  <img src="//placehold.it/200x100?text=Another" data-src="//placehold.it/200x100?text=Another" data-hover="//placehold.it/200x100?text=Image" />
</div>

【讨论】：

【解决方案2】：

您可以使用 Jquery Animation 进行无缝图像更改，例如下面的解决方案

$("#klubnika").hover(function(){

   $(this).fadeOut('fast', function () {
       $(this).attr('src', "img/team-section/banka-klub.jpg");
       $(this).fadeIn('fast');
    }); 
});

在提到之前回答过

jQuery animate on an image replacement

【讨论】：

哈哈。很快。

【解决方案3】：

这个问题几乎是一样的： Fading between images

他们给出的答案使用了jQuery的fadeIn和fadeOut函数，如下所示：

<div id="imageSwap">
</div>  

<script language="javascript" type="text/javascript">

    $(document).ready(function () {
      setImageOne();
    });

    function setImageOne() {
      $('#imageSwap').fadeIn(500).html('<img src="image01.jpg" />').delay(2000).fadeOut(500, function () { setImageTwo(); });
    }

    function setImageTwo() {
      $('#imageSwap').fadeIn(500).html('<img src="image02.jpg" />').delay(2000).fadeOut(500, function () { setImageOne(); });
    }

</script>

我认为您可以从中获得灵感，但如果可能的话，我建议您改用 CSS。

【讨论】：