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.
