I know i can create a custom Directive bound to mousenter/leave but then
the element still would need to be animated. Will try ng-animate.
On Sunday, 2 March 2014 20:40:09 UTC, gurpal2000 wrote:
>
> 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
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
