jquery - 在 JS 上用动画或延迟交换图像

Question

我喜欢 fiddle :http://jsfiddle.net/17g6q8k0/2/

    <img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png"
src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

和JS部分

        var sourceSwap = function () {
            var $this = $(this);
            var newSource = $this.data('alt-src');
            $this.data('alt-src', $this.attr('src'));
            $this.attr('src', newSource);
        }

        $(function() {
            $('img[data-alt-src]').each(function() { 
                new Image().src = $(this).data('alt-src'); 
            }).hover(sourceSwap, sourceSwap); 
        });

当您在图像上移动鼠标时，它会发生变化。当您移除鼠标时 - 它会变回原来的样子。

在当前示例中，它会瞬间改变。

如何添加暂停或动画(动画更好)？

此图像具有相同的大小。但我会将它用于具有不同大小的图像(例如鼠标悬停时的 [f] 和 [facebook] 按钮)，并使它更容易被眼睛看到。

Answer 1

我已经稍微更新了你的脚本 http://jsfiddle.net/17g6q8k0/182/

无论如何，您都需要使用 css。第一个选项是创建带有背景的 div 并为其设置动画。

不过，如果你想使用 ，还有另一种方法。您必须创建包含 2 个图像的容器。

<div class="hover-image">
  <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png"/>  
  <img class="hover" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png"/>
</div>

其中一个必须绝对定位并覆盖第一张图片。

.hover-image .hover {
  position: absolute;
  left:0;
  top:0;
  opacity: 0;
}

然后您可以为这两个图像设置不透明度动画。

$this.find("img").each(function(){
  if($(this).hasClass("hover")) {
    $(this).animate({
      'opacity': 1
    }, "slow");
  } else {
    $(this).animate({
      'opacity': 0
    }, "slow")
  }
});