Question

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只是淡入不起作用，淡入隐藏使过渡有点毛病，而顶部淡入声明本身也没有做任何事情......将鼠标，mouseoff最好的，如果是这样的话，我将如何制作这种转变的动画？使用我当前的代码，图像交换正常，但我似乎无法弄清楚动画/淡入/淡出。谢谢您的帮助！！！：d

Answer 1

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

＆＃13;

$('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();
    });
});

＆＃13;

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

＆＃13;

如果您希望同时发生fadeIn和fadeOut，则必须放置两个图像并隐藏第二个图像。鼠标悬停在你身上时可以同时为它们设置动画。像这样：

＆＃13;

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

＆＃13;

.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;  
}

＆＃13;

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

＆＃13;

JQuery - 使用replace和attr更改淡入（动画）img

1 个答案: