JQuery - 使用替换和属性更改淡入（动画）img答案

【问题标题】：JQuery - fade in (animate) img with replace and attr changeJQuery - 使用替换和属性更改淡入（动画）img
【发布时间】：2015-11-24 05:21:30
【问题描述】：

HTML：

            <td>
                <div class="content" style=""><img src="FoodBlockPic.png" style="max-width: 100%;"></div>
            </td>
            <td>
                <div class="content" style=""><img src="DeliveryBlockPic2.png" style="max-width: 100%;" id="deliveryPIC"></div>
            </td>
            <td>
                <div class="content" style=""><img src="PickupBlockPic2.png" style="max-width: 100%;"></div>
            </td>

        </tr>

jQuery：

<script>
    $(document).ready(function(){
      $('#deliveryPIC').hover(function() {
        var src = $(this).attr("src").replace("DeliveryBlockPic2.png", "DeliveryBlockPicAlt.png");
        $(this).attr("src", src);
        // $('#deliveryPIC').fadeIn("slow");
        // $('#deliveryPIC').hide();
        $('#deliveryPIC').fadeIn();
      }, function() {
        var src = $(this).attr("src").replace( "DeliveryBlockPicAlt.png", "DeliveryBlockPic2.png");
        $(this).attr("src", src).stop();
        // $('#deliveryPIC').fadeIn("slow");
        // $('#deliveryPIC').hide();
        $('#deliveryPIC').fadeIn();
      });
    });
  </script>

我只想为原始图片之间的过渡设置动画，并在悬停时替换 src 图片，并在悬停时再次设置动画。我无法弄清楚如何做到这一点 b/c 只是淡入不起作用，用 hide 淡入会使过渡有点小故障，而顶部的淡入语句本身也没有任何作用...... mouseon，mouseoff 会是最好在这里，如果是这样，我将如何为过渡设置动画？使用我当前的代码，图像交换可以正常工作，但我似乎无法弄清楚动画/淡入/淡出。谢谢您的帮助！！！ :D

【问题讨论】：

你试过fadeIn(5000)这样吗？
是的，根据你的建议，我刚刚做了 - 但这也不起作用。

标签： javascript jquery html css jquery-animate

【解决方案1】：

如果你想替换src属性你需要知道你必须等到图像完成fadeOut动画才能替换src，否则图像只是消失而不是动画。

$('img').hover(function(){
  var img = $(this);
  img.fadeOut(function(){
    img.attr('src', img.attr('data-src2')).fadeIn();
  });
}, function(){
    var img = $(this);
    img.fadeOut(function(){
      img.attr('src', img.attr('data-src1')).fadeIn();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.stack.imgur.com/1JQvA.png" data-src1="http://i.stack.imgur.com/1JQvA.png" data-src2="http://i.stack.imgur.com/Y4qVb.png" />

如果您希望fadeIn 和fadeOut 同时出现，您必须将这两个图像都放入并隐藏第二个图像。当鼠标悬停时，您可以同时为它们设置动画。像这样的：

$('.wrapper').hover(function(){
  $('img').fadeToggle('slow');  
}, function(){
  $('img').fadeToggle('slow');  
});

.wrapper {
  position:relative;  
  width:69px;
  height:68px;
}

.wrapper img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.wrapper img:last-child {
  display:none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <img src="http://i.stack.imgur.com/1JQvA.png" />
  <img src="http://i.stack.imgur.com/Y4qVb.png" />
</div>

【讨论】：