Question

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

我的尝试

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

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

Answer 1

您可以使用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

Answer 2

我真的会使用两个图像并使用这种方式：

#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>

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

JQuery，顺畅交换图像

3 个答案: