0

ユーザーがボタンをクリックしてからAjaxでページメソッドを呼び出したときに、ボタンをアニメーション画像と交換したい。最善の方法を教えてください。ボタンを画像と交換する方法を知っています。ここに1つのサンプル。

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

ボタンがページ上にある画像の位置を維持する方法がわかりません。基本的に、ユーザーがボタンをクリックして ajax 呼び出しを開始すると、ボタンの場所にアニメーション画像を表示し、ajax 呼び出しが終了すると、アニメーション画像が再びボタンに置​​き換えられます。

ここで、1 つのデモ URL demo.aspnetawesome.comを示します。

非常に再利用可能な私の目標を達成するための最良の方法を教えてください。ありがとう。

4

1 に答える 1

0

1 つの方法は、ボタンと画像の 2 つの要素を持つことです。ボタンを表示し、アニメーション画像を非表示にします (display: none を使用して、ページ内のスペースを占有しないようにします)。次に、ボタンをクリックすると、ボタンを非表示にして画像を表示します。display: none を使用すると、ボタンと画像が同じサイズであり、DOM で隣接してレンダリングされる場合、それらは同じ場所を消費し、レイアウトには影響しません。

非常に大まかに：

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

button.on('click', function(){
  button.hide();
  animation.show();
});
于 2013-08-29T06:53:21.733 に答える