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--
Для ИМАГ х годов с различными размерами сохранить их в элементе с помощью .data()

$(".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

РЕДАКТИРОВАТЬ-2-
Простой способ решить проблему сдвиг, чтобы обернуть теги IMG в inline- блочный элемент, установить размеры элементов в том, что изображения затем сделать IMG Absolutly расположенный

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