I'd always prefer a CSS only solution like this simple example - http://plnkr.co/edit/pDLTuHSPsONhH6faSIHz?p=preview
2014-03-03 17:23 GMT+01:00 gurpal2000 <[email protected]>: > Solved by injecting the $animate service and then using css in bound > events. > > On Sunday, 2 March 2014 23:32:35 UTC, gurpal2000 wrote: >> >> 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. > -- Bernhard Rode M.Sc. (Master of Computer Science and Media) fon +49.171.5629409 mail [email protected] twitter @ebbo google+ *google.com/+BernhardRode <http://www.google.com/+BernhardRode>* twitter twitter.com/ebbo facebook facebook.com/bernhard.rode -- 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.
