jquery - Jqueryを使用してマウスオーバーすると画像が拡大されますか?

Question

マウスオーバー時に画像を拡大し、マウスアウト後にサイズを通常に戻そうとしています。私は次のものを持っています：

$('#image img').live("mouseover", function(){
          var $this=$(this);

          $this.attr('width','25%');
          $this.attr('height','25%');


       })

拡大部分は正常に機能しますが、マウスアウト後にサイズを縮小する方法がわかりません。また、私のコードは少し醜く、修正方法がわかりません。どうもありがとう。

Answer 1

これを試してください: http://jsfiddle.net/FPKAP/11/ またはホバーを使用: http://jsfiddle.net/FPKAP/12/

ハルクにカーソルを合わせるとズームインし、マウス アウトでズームアウトします。

これは必要性を助けるはずです。私が何か誤解していたら教えてください。:)

コード

$('#zoomimg').mouseenter(function() {
    $(this).css("cursor","pointer");
    $(this).animate({width: "50%", height: "50%"}, 'slow');
});

$('#zoomimg').mouseleave(function() {   
    $(this).animate({width: "28%"}, 'slow');
});

コード

$('#zoomimg').hover(function() {
    $(this).css("cursor", "pointer");
    $(this).animate({
        width: "50%",
        height: "50%"
    }, 'slow');

}, function() {
    $(this).animate({
        width: "28%"
    }, 'slow');

});​

Answer 2

これを使用できます: jsFiddle

$('#image').hover(function(){
    $(this).css({width:"100%",height:"100%"});
},function(){
    $(this).css({width:"50%",height:"50%"});   
});

Answer 3

私は最初にこれのためにCSSを試してみます:

#image img {
  width: 50%;
  height: 50%;
}

#image img:hover {
  width: 100%;
  height: 100%;
}