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

Soirée à tous - quel est le meilleur moyen pour accéder à une image en hauteur et en largeur de façon dynamique .
Je veux ajouter 20% pour une image de largeur et de hauteur et d'animer lorsque la div entourant est planait, je suppose que je dois utiliser "il", mais ne savez pas comment accéder à l'image.

Toute aide greatfully reçu.

Acclamations Paul

OriginalL'auteur Dancer | 2010-09-02

  1. 8

    Vous pourriez faire quelque chose comme cela, à l'aide de .hauteur() et .largeur() avec les arguments de la 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; });
});​

    Vous pouvez lui donner un essai ici, si vous souhaitez une animation fluide, vous pouvez stocker la première hauteur/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 });
});​

    Vous pouvez lui donner un essai ici, assurez-vous d'exécuter l'une de ces options dans $(window).load(), et pas $(document).ready(), car les dimensions ne peut pas être chargé.

    OriginalL'auteur Nick Craver

  2. 7

    Utiliser le 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);
});
    cool, cheers mate

    OriginalL'auteur djdd87

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

    OriginalL'auteur Zafer

  4. 1

    Voici un moyen de le faire à l'aide d'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
    });
});
    Cela ne fonctionne pas tout à fait comme prévu, car si vous passez dans/avant l'animation terminée, la nouvelle .height() et .width() valeurs ne sera pas de leur destination, de valeurs, de sens, il va revenir à certains autres taille 🙂 Essayez ici: jsfiddle.net/nick_craver/JqDMR la seule modification que j'ai faite était que $this n'est pas défini dans votre code 🙂

    OriginalL'auteur GSto