jQuery鼠标悬浮菜单自动缩放效果

日期：2013-4-6 来源：GBin1.com



在线演示

如果大家经常访问gbin1博客的话，肯定熟悉首页的菜单自动缩放效果，当你鼠标悬浮当前菜单的时候，会挤压其它的菜单宽度。

使用以下代码也可以实现类似的菜单效果。

jQuery代码：

$("div.stripes > div").mouseenter(function() {
$(this).stop(true, true).css("width","40%").siblings().css("width","20%");
}).mouseleave(function(){
$(this).stop(true, true).css("width","25%").siblings().css("width","25%");
});

以下是调试效果：

在线调试：http://www.gbtags.com/gb/debug/4db63fea-828b-4545-834e-5f13f93b6951.htm

via
极客标签

来源：jQuery鼠标悬浮菜单自动缩放效果