Search code examples
javascriptjqueryscaleeffect

JQuery/Javascript block scaling

I have some div-block. I need in scaling it's own size. Like in MacOS dock panel, when icon is hovered. Can I do this?

Solution

  • yes you can:

    html:

    <div class="scaleMe">&nbsp</div>

    jQuery:

    $(function(){ /* makes sure your dom is ready */
   $('div.scaleMe').hover(function(){
                       $(this).stop(false, true).animate({width:'50px', height:'50px'}, 1000) /* makes the div big on hover, and .stop() makes sure the annimation is not looping*/
                    },function(){
                       $(this).stop(false, true).animate({width:'20px', height:'20px'}, 600) /* goes back to normal state */
                    })
})

    here you can find a nice example of a OSX like dock made with jQuery: http://www.ndesign-studio.com/blog/css-dock-menu