Jquery - Augmente la hauteur et la largeur de l'image 20% sur le vol stationnaire

Question

Tous les soirs - Quel est le meilleur moyen d'accéder dynamiquement à la hauteur et à la largeur d'une image.
Je veux ajouter 20% à la largeur et à la hauteur d'une image et l'animer lorsque le div environnant est plané, je suppose que je dois utiliser 'ceci', mais je ne sais pas comment accéder à l'image.

Toute aide reçue avec plaisir.

Vive Paul

Answer 1

Vous pourriez faire quelque chose comme ça, en utilisant .height() et .width() avec des arguments de fonction:

$("img").hover(function() { 
    $(this).height(function(i, h) { return h * 1.2; }) 
      .width(function(i, w) { return w * 1.2; }); 
}, function() { 
    $(this).height(function(i, h) { return h/1.2; }) 
      .width(function(i, w) { return w/1.2; }); 
});​ 

You can give it a try here, si vous vouliez une animation fluide, vous pouvez stocker la première ight/largeur et .animate(), comme ceci:

$("img").each(function() { 
    $.data(this, 'size', { width: $(this).width(), height: $(this).height() }); 
}).hover(function() { 
    $(this).stop().animate({ height: $.data(this,'size').height*1.2, 
          width: $.data(this,'size').width*1.2 }); 
}, function() { 
    $(this).stop().animate({ height: $.data(this,'size').height, 
          width: $.data(this,'size').width }); 
});​ 

You can give it a try here, assurez-vous d'exécuter une ou l'autre de ces options $(window).load() et pas$(document).ready(), puisque les dimensions peuvent ne pas être encore chargés.

Answer 2

Utilisez les width et height méthodes de jQuery:

$(".divs").mouseover(function() { 

    var $div = $(this); 
    var $item = $div.find("img"); 

    var width = $item.width(); 
    var height = $item.height(); 

    width = width * 1.2; 
    height = height * 1.2; 

    $item.width(width); 
    $item.height(width); 
}); 

Answer 3

$("#divId").mouseover(function() { 
    var o = $("#imgid"); 
    o.width(o.width()*1.2).height(o.height()*1.2); 
}); 

Answer 4

Voici une façon de le faire en utilisant Animer, ce qui devrait assurer une transition en douceur:

$("img").hover(function() { 
    var $this = $(this); 
    $this.animate({ 
     'height': $this.height() * 1.2, 
     'width' : $this.width() * 1.2 
    }); 
},function() { 
     var $this = $(this); 
     $this.animate({ 
     'height': $this.height()/1.2, 
     'width' : $this.width()/1.2 
    }); 
});