jQuery在悬停时调整div框的大小

Question

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

• 一次只调整 6 个 .boxes div 之一的大小（带有它的文本内容）
• 制作未选中的透明 .box div
• 显示隐藏的.more span

代码：

    $('.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');
        });

但有些事情是错误的。只有第一个盒子效果很好，但在调整大小时它不会覆盖其他盒子。

它的效果你可以看这里：jsFiddle

我的问题是：是否有可能统一此代码并使其正常工作？ :-[

Answer 1

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

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

---

更新：我已编辑您的代码：http://jsfiddle.net/Puuxj/7/

我的改变：

• 删除了hover 类并改用.not(this)。 （除非需要该课程来做其他事情……）
• 为.stop()添加了参数。
• 使用mouseenter/mouseleave 而不是mouseover/mouseout。
• 绝对定位元素