用户单击时交换带图像的按钮

Question

我希望当用户点击按钮然后通过Ajax页面方法调用然后我想要用动画图像交换按钮。告诉我最好的方法。我知道如何用图像交换按钮。这里有一个样本。

$('the-button').bind('click', function () {
    $(this).replaceWith('<img src="/wherever.jpg"/>');
});

我不知道如何保持按钮位于页面上的图像位置。 基本上我想在按钮的位置显示动画图像，当用户点击它和ajax调用开始时，当ajax调用完成时，动画图像将再次被按钮替换。

这里我给的是一个演示网址 demo.aspnetawesome.com

请告诉我实现我的目标的最佳方式，这将是高度可重复使用的。感谢。

Answer 1

一种方法是拥有两个元素，即按钮和图像。使按钮可见并隐藏动画图像（使用display：none以使其不占用页面中的任何空间）。然后，单击该按钮时，隐藏按钮并显示图像。 如果你使用display：none然后提供了按钮，图像大小相同，并且在DOM中相邻，它们会消耗相同的位置而不会影响你的布局。

非常粗略：

var animation = $('#the-image');
var button = $('#the-button');

button.on('click', function(){
  button.hide();
  animation.show();
});