jQueryサイズ変更オブジェクト

Question

このサイズ変更オブジェクトが正しく動作するようにしようとしています。

1. MouseDown（保持）すると、オブジェクトは80pxにサイズ変更されます。

2. リリース時に、オブジェクトを通常のサイズに戻したいと思います。

問題： オブジェクトはMouseDownイベントに100pxにから80pxに変更されますと、そうマウスは「正常に戻ってサイズを変更」をトリガしません解放し、マウスがオブジェクト自体にそれ以上であることが起こりませんこと再びアニメーション。

私はこれで回避策を実行しようとしました理由です：で

if (global.mouseup) and ($('#myimage').width('80px')) 

完全なコード：任意の助け http://jsfiddle.net/G8Ste/568/

ありがとう！

Answer 1

バインド正常に戻って、IMGのサイズを変更する文書にmouseupハンドラ：

$('#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のデフォルトの幅と高さを指定してコードを複製する必要があることです。 this answerで説明する手法を使用するか、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/