jquery animation help -
i have 2 circles, 1 small (thumb) 1 big (info), , when user hover on small (thumb), small icon need resize in big one. need show new information in big. think have width , height animation, because small 100px x 100px, , big 200 x 200 size.
please advice on best way this. avoid using plug-ins.
using jquery 1.4.2 or up, can achieve using:
$(".smallcircle").hover( function () { $(this).animate({ width: '200px', height: '200px' }, 200, function() { // animation complete. //do whatever }); }, function () { $(this).animate({ width: '100px', height: '100px' }, 200, function() { // animation complete. //do whatever }); });
put class "smallcircle" in small circle.
p.s. in each state of hover, can control happens after animation done (the place put "//do whatever"), that's place insert content of big cicrle.
Comments
Post a Comment