0

我试图让图像在悬停时淡出，交换图像 src，然后淡入。我正在为不透明度设置动画，因为淡入/淡出功能将元素设置为 display:none，我不希望这样发生。

这是我的代码：

$('.imgswap').on({
'mouseenter': function(){
    var $nextimg = $(this).data('imagesource');
        if ($nextimg != $('#floorplan').attr('src')) {
        $('#floorplan').animate({"opacity": "0"}, "fast",function () {
            $('#floorplan').attr('src',$nextimg).animate({"opacity": "1"}, "fast");
        });
    }
}
});

你能明白为什么第二个动画函数在设置源之后没有触发吗？

更新：经过进一步测试并尝试以下评论之一，事实证明动画在设置 SRC 后正在触发，但如果尚未加载新图像，则旧图像保持可见直到新图像可用。所以......我想我需要某种“加载器”，它只animate({"opacity": "1"}, "fast")在新图像加载时触发。

4

1 回答 1

1

这是DOM我与上面的 JS 一起使用的，效果很好：

<div class="imgswap" data-imagesource="http://placehold.it/350x450">
  <img id="floorplan" src="http://placehold.it/350x150"/>
</div>

代码笔： http ://codepen.io/anon/pen/CGKaF

为了解决您的加载问题，我更新了 codepen 以查看它是否已加载。试试看。另外，查看图像加载时的 jQuery 回调（即使图像被缓存）和这个方便的插件：https ://github.com/desandro/imagesloaded

于 2013-09-03T17:26:52.810 回答