Jquery - увеличить на 20% высоту и ширину изображения при наведении

Question

Evening all - лучший способ динамического доступа к высоте и ширине изображения.
Я хочу добавить 20% к ширине и высоте изображений и анимировать их при наведении на окружающий элемент. Думаю, мне нужно использовать «this», но я не уверен, как получить к нему доступ.

Любая помощь получена.

Приветствия Пол

Answer 1

Вы можете сделать что-то подобное, используя .height() и .width() с аргументами функции:

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

Вы можете попробовать здесь , если вы хотите плавную анимацию, вы можете сохранить начальную высоту / ширину и .animate(), например:

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

Вы можете попробовать здесь , обязательно запустите любой из этих параметров в $(window).load(), а не $(document).ready(), так как размеры еще не могут быть загружены .

Answer 2

Используйте width и height методы 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

Вот способ сделать это с помощью animate, который должен обеспечить более плавный переход:

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

Answer 4

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