このリサイズオブジェクトを適切に動作させるようにしようとしています。
MouseDown（保持）すると、オブジェクトのサイズが80ピクセルに変更されます。
リリース時に、オブジェクトを通常のサイズに戻したい。
問題： MouseDownでオブジェクトのサイズが100pxから80pxに変更されると、マウス自体がオブジェクト自体には存在しなくなるため、マウスを放すと "resize back to normal"アニメーションが再度トリガーされなくなります。
だから私はこれを使って回避策を試みました：
if (global.mouseup) and ($("#myimage").width("80px"))
完全なコード： http://jsfiddle.net/G8Ste/568/
助けてくれてありがとう！
回答：
回答№1は2束縛する mouseup ハンドラをimgのサイズをnormalに戻すドキュメントに追加します。
$("#myimage").mousedown(function() {
var img = $(this);
img.stop().animate({
width: ["80px", "swing"],
height: ["80px", "swing"],
}, 50, "swing");
$(document).one("mouseup", function(){
img.css({width:"",height:""});
});
});
作業デモ： http://jsfiddle.net/G8Ste/569/
あなたのコードに関するいくつかのノート。
- あなたは
global変数が定義されているので、そこでエラーが発生しています。 - の代わりに
and、あなたは意味する必要があります&&.
編集： もちろん、元のコードと同じようにアニメーションを使用することができます。ここでデモ： http://jsfiddle.net/G8Ste/574/。それの限界は、あなたがしなければならないことですCSSとJavaScriptのデフォルトの幅と高さを指定します。あなたは、私が説明している手法を使用するなど、さまざまな方法を解決することができます この答え、またはjQuery-UIを使用して .switchClass() および関連する方法。 jQuery-UIを使用した例：
$("#myimage").mousedown(function() {
var img = $(this);
img.stop().addClass("small", 50);
$(document).one("mouseup", function(){
img.stop().switchClass("small", "large", 150, function() {
img.removeClass("large", 1000);
});
});
});
デモ： http://jsfiddle.net/G8Ste/576/