Question

I’m trying to implement an image zooming effect (because it’s in a container with overflow:hidden, increasing it’s width and sliding it left should do the trick).

I’ve managed to make it increase it’s width:

/* Zoom in images */
$('img.vectimg').load(function() {
    $(this).data('width', this.width);
}).bind('mouseenter mouseleave', function(e) {
    $(this).stop().animate({
        width: $(this).data('width') * (e.type === 'mouseenter' ?  1.2 : 1)
    });
});

But how can I add the animation for moving it to left?
I tried appending this / but it haven’t worked.

$(this).stop().animate({
            left: $(this).position().left  + 500
        });

I’m a complete newbie so please don’t take me hard 🙂

Answer 1

You can add multiple properties in the same animate() call.

$(this).stop().animate({
    width: $(this).data('width') * (e.type === 'mouseenter' ?  1.2 : 1),
    left: $(this).position().left + (e.type === 'mouseenter' ? 500 : -500)
});

Read more: http://api.jquery.com/animate/