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');

});​