Quantcast
Channel: MarsHut
Viewing all articles
Browse latest Browse all 6551

Animation (or effect) on mouse over the angularjs way

$
0
0
Hi
New to angularjs coming from jquery.

I have some thumbnails (150x150px). On mouse hover, i scale up the images a
fraction about the center. Essentially a "zoom".
On mouse out, i reset the scale/position.

I can't get my head around how I would do the animate effect without
jquery. CSS3?

Here's the jquery version. Any help most appreciated.

$('.thumb').hover(
function () {
var $img = $(this).find('img:first');
$img.stop(true).animate({
'width': '160px',
'height': '160px',
'marginTop': '-5px',
'marginLeft': '-5px'
}, 100);
},
function () {
var $img = $(this).find('img:first');
$img.stop(true).animate({
'width': '150px',
'height': '150px',
'marginTop': '0px',
'marginLeft': '0px'
}, 100);

);

Thanks

Viewing all articles
Browse latest Browse all 6551

Trending Articles