jquery懸停功能

Question

var h=0; 
var w=0; 
    $(".extend").hover(function() { 

     //alert(h); 
     $(this).css({'z-index' : '999' }); 
     $(this).addClass("hover").filter(":not(:animated)").stop() 
      .animate({ 
       marginTop: '-110px', 
       marginLeft: '10px', 
       top: '80%', 
       left: '80%', 
       width: 387, 
       height: 487, 
       padding: '0px' 
      }, 200); 
     h=$(this).height(); 
     w=$(this).width(); 
     } , function() { 
     $(this).css({'z-index' : '0'}); 
     $(this).removeClass("hover").stop() 
      .animate({ 
       marginTop: '0', 
       marginLeft: '0', 
       top: '0', 
       left: '0', 
       width:w, 
       height:h, 
       padding: '0px' 
      }, 400); 
    }); 

<img class="extend" src="a.jpg"> 
<img class="extend" src="b.jpg"> 

我有我的懸停功能的問題我不能使圖像回到原來的大小，如果我把它懸停到a.jpg它展開然後我將鼠標懸停在b.jpg而不等待a.jpg要恢復到原來的大小，它會變得越來越大。

如何在不改變尺寸的情況下懸停和展開？

Answer 1

除非你需要你的寬度和高度改變，你應該只設置一次，假設兩個圖像大小相同這應該工作

var h=$(".extend").height(); 
var w=$(".extend").width(); 
    $(".extend").hover(function() { 

     //alert(h); 
     $(this).css({'z-index' : '999' }); 
     $(this).addClass("hover").filter(":not(:animated)").stop() 
      .animate({ 
       marginTop: '-110px', 
       marginLeft: '10px', 
       top: '80%', 
       left: '80%', 
       width: 387, 
       height: 487, 
       padding: '0px' 
      }, 200); 
     } , function() { 
     $(this).css({'z-index' : '0'}); 
     $(this).removeClass("hover").stop() 
      .animate({ 
       marginTop: '0', 
       marginLeft: '0', 
       top: '0', 
       left: '0', 
       width:w, 
       height:h, 
       padding: '0px' 
      }, 400); 
    }); 

FIDDLE

EDIT--
對於IMAG具有不同尺寸的ES使用。數據（）

$(".extend").each(function(){ 
    $(this).data('width', $(this).width()); 
    $(this).data('height', $(this).height()); 
}) 
$(".extend").hover(function() { 

    //alert(h); 
    $(this).css({'z-index' : '999' }); 
    $(this).addClass("hover").filter(":not(:animated)").stop() 
     .animate({ 
      marginTop: '-110px', 
      marginLeft: '10px', 
      top: '80%', 
      left: '80%', 
      width: 387, 
      height: 487, 
      padding: '0px' 
     }, 200); 
    } , function() { 
    $(this).css({'z-index' : '0'}); 
    $(this).removeClass("hover").stop() 
     .animate({ 
      marginTop: '0', 
      marginLeft: '0', 
      top: '0', 
      left: '0', 
      width:$(this).data('width'), 
      height:$(this).data('height'), 
      padding: '0px' 
     }, 400); 
}); 

將它們保存在所述元件

FIDDLE

EDIT -2-
解決換檔問題的簡單方法是包裹的img標籤在inline-塊元件，設置元件尺寸與圖像的然後使是絕對定位在IMG

<span><img class="extend" src="a.jpg"></span> 
<span><img class="extend" src="b.jpg"></span>​ 

$(".extend").each(function(){ 
    $(this).data('width', $(this).width()); 
    $(this).data('height', $(this).height()); 
    $(this).parent().css({display:'inline-block', width: $(this).width(), height: $(this).height()}) 
    .end().css({position:'absolute'}); 
}) 
$(".extend").hover(function() { 

    //alert(h); 
    $(this).css({'z-index' : '999' }); 
    $(this).addClass("hover").filter(":not(:animated)").stop() 
     .animate({ 
      marginTop: '-110px', 
      marginLeft: '10px', 
      top: '80%', 
      left: '80%', 
      width: 387, 
      height: 487, 
      padding: '0px' 
     }, 200); 
    } , function() { 
    $(this).css({'z-index' : '0'}); 
    $(this).removeClass("hover").stop() 
     .animate({ 
      marginTop: '0', 
      marginLeft: '0', 
      top: '0', 
      left: '0', 
      width:$(this).data('width'), 
      height:$(this).data('height'), 
      padding: '0px' 
     }, 400); 
}); 

FIDDLE

Answer 2

試試這樣說：

$(".extend").hover(function() { 

    //alert(h); 
    h=$(this).height(); 
    w=$(this).width(); 
    $(this).css({'z-index' : '999' }); 
    $(this).data('width', w); 
    $(this).data('height',h); 
    $(this).addClass("hover").filter(":not(:animated)").stop() 
     .animate({ 
      marginTop: '-110px', 
      marginLeft: '10px', 
      top: '80%', 
      left: '80%', 
      width: 387, 
      height: 487, 
      padding: '0px' 
     }, 200); 

    } , function() { 
    $(this).css({'z-index' : '0'}); 
    h=$(this).data('height'); 
    w=$(this).data('width'); 
    $(this).removeClass("hover").stop() 
     .animate({ 
      marginTop: '0', 
      marginLeft: '0', 
      top: '0', 
      left: '0', 
      width:w, 
      height:h, 
      padding: '0px' 
     }, 400); 
}); 

Answer 3

由於w和h是全局，每次鼠標懸停在一個新的元素時，他們的成長越來越大。

商店他們使用.data()屬性的實際元素內：

$(".extend").hover(function() { 
    $(this).css({'z-index' : '999' }); 
    $(this).addClass("hover").filter(":not(:animated)").stop() 
     .animate({ 
      marginTop: '-110px', 
      marginLeft: '10px', 
      top: '80%', 
      left: '80%', 
      width: 387, 
      height: 487, 
      padding: '0px' 
     }, 200); 

    $(this).data('original-height', $(this).height()); 
    $(this).data('original-width', $(this).width()); 

    } , function() { 
    $(this).css({'z-index' : '0'}); 
    $(this).removeClass("hover").stop() 
     .animate({ 
      marginTop: '0', 
      marginLeft: '0', 
      top: '0', 
      left: '0', 
      width:$(this).data('original-width'), 
      height:$(this).data('original-height'), 
      padding: '0px' 
     }, 400); 
});