jQuery在hover时调整div框

我有两部分代码，做3件事：

• 仅调整6个.boxes div中的一个（使用它的文本内容）
• 制作未选中的透明.box div
• 显示隐藏。更多跨度

码：

$('.content_area div').hide(); $(function(){ $('.box').bind('mouseover',function() { $(this).addClass('up'); $('.box').not('.up').fadeTo('normal',0.2); }); $('.box').bind('mouseout',function() { $('.box').removeClass('up').fadeTo('normal',1); }); }); initwidth = $('.box').width(); initHeight = $('.box').height(); $('.box').hover(function(){ $(this).children('.more').show(); $(this).stop().animate({width: '220', height: '140'},{queue:false, duration:'fast'}).css('font-size', '1.2em'); }, function(){ $(this).children('.more').hide(); $(this).stop().animate({width: initwidth, height: initHeight},{queue:false, duration:'fast'}).css('font-size', '1em'); }); 

但有些事情是错误的。 只有第一个盒子工作得很好，但是在resize时它不会掩盖其他盒子。

它的影响你可以在这里看到： jsFiddle

我的问题是：是否有可能统一这些代码并使其有效？ ： – [

Answer 1

你的代码非常混乱。 我看起来像你拼凑在一起。 很遗憾没有时间为你清理它，所以这里有一些一般的提示：

• 对于一个.hover()与mouseover和mouseout绑定完全相同，所以你的盒子不必要地为同一个事件提供两个处理程序。 您还要在文档就绪事件中绑定一个，而另一个不绑定，这是不一致的。
• 你需要在调光和（联合）调光动画中添加stop() s，因为你排队并继续前进。 阅读文档，因为您最需要设置clearQueue和jumpToEnd参数。
• 盒子移动是因为你漂浮它们。 改用绝对定位（注​​意它的缺点！）

---

更新：我编辑了你的代码： http ： //jsfiddle.net/Puuxj/7/

我的变化：

• 删除了类hover并改为使用.not(this) 。 （除非需要其他的课程……）
• 为.stop()添加了参数。
• 使用mouseenter / mouseleave代替mouseover / mouseout 。
• 将元素定位为绝对的