点击一个按钮，在Chrome和Safari中不能平滑地更改图像

Question

我有一个带有许多按钮的界面，当单击按钮时，我使用jquery来切换按钮图像。像这样的东西：

$(".button").click(function() {
   $(".button").html("<img src="...">");
});

一切正常。在Firefox中，它会立即更改按钮，看起来非常好看。但是，在Chrome和Safari中，当你点击按钮（或使用其他功能自动更新按钮，实际上非常相似的代码：.html（“...”））时，按钮会闪烁，基本上当它交换图像时，那里那是一个空白的时刻。

我有什么办法可以解决这个问题吗？

由于

Answer 1

你可以做..

$(".button").click(function() {
  $(this).fadeOut(800,function(){
    $(this).text("<img src='img.jpeg'>");
    $(this).fadeIn(800);
  })
});