Кнопка обмена с изображением при нажатии пользователем

Question

Я хочу, чтобы при нажатии пользователем кнопки, затем вызов метода страницы Ajax, я хочу поменять кнопку с анимированным изображением. покажите мне лучший способ сделать это. Я знаю, как сменить кнопку с изображением. здесь один образец.

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

Я не знаю, как сохранить положение изображения, где кнопка находится на странице. В основном я хочу показать анимированное изображение в месте кнопки, когда пользователь нажимает на него и запускает ajax-вызов, и когда заканчивается ajax-вызов, анимированное изображение будет снова заменено кнопкой.

здесь я даю один демо URL demo.aspnetawesome.com

пожалуйста, покажите мне, что лучший способ достичь своей цели, которая будет легко повторно использовать. Благодарю.

Answer 1

Одним из способов было бы иметь два элемента, кнопку и изображение. сделать кнопку видимой и анимированное изображение скрытым (с дисплеем: нет, чтобы он не занимал места на странице). Затем, когда кнопка нажата, скройте кнопку и покажите изображение. Если вы используете display: none, то при условии, что кнопка и изображение имеют одинаковый размер и оказываются смежными в DOM, они будут потреблять одно и то же место и не влияют на ваш макет.

Так очень грубо:

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

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