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
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