Hello, 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?
+1
A:
Maybe something like this?
$("#myDiv").hover(
function(){
$(this).css({height : scaled_height, width : scaled_width});
},
function(){
$(this).css({height : original_height, width : original_width});
}
);
Jon
2010-04-20 13:13:24
You could get rid of half of the `.css()` statements by grouping them together: `$(this).css({ height: originalHeight, width: originalWidth });`
Mathias Bynens
2010-04-20 13:15:47
@Mathias Bynens, Thanks for the tip! I'll change that right now.
Jon
2010-04-20 13:16:54
why don't you use .hover() ?
meo
2010-04-20 13:23:06
Good point, I changed my example and actually found a good article about the differences http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.htm
Jon
2010-04-20 13:42:47
+4
A:
yes you can:
html:
<div class="scaleMe"> </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
meo
2010-04-20 13:18:42