fonction vol stationnaire 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"> 

J'ai problème avec ma fonction de vol stationnaire je ne peux pas faire l'image à la taille d'origine si je passe la souris pour A.jpg il étendre alors je passe la souris vers B.jpg sans attendre a.jpg pour revenir à la taille d'origine, il deviendra de plus en plus grand.

Comment est-ce que je peux planer et agrandir sans changer de taille?

Answer 1

Sauf si vous avez besoin de votre largeur et la hauteur pour changer, vous ne devez régler qu'une seule fois, en supposant les deux images sont de la même taille que cela devrait fonctionner

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--
Pour imag es avec des dimensions différentes de les enregistrer dans l'élément à l'aide .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

EDIT-2-
Une façon simple de résoudre le problème de décalage est d'envelopper les balises img dans un inline- élément de bloc, fixer les dimensions des éléments à celle de l'image pour effectuer le img absolutly positionné

<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

Essayez cette façon:

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

Depuis w et h sont globals, chaque fois que vous passez un nouvel élément, ils grossissent et plus.

magasin eux à l'intérieur de l'élément réel en utilisant .data() attributs:

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