Question

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

一次仅调整6个.boxes div中的一个（带有文本内容）
制作未选中的透明.box div
show hidden .more span

CODE：

    $('.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()添加到调光和（联合）调光动画中，因为您排队并继续前进。阅读documention，因为您最需要设置clearQueue和jumpToEnd参数。
盒子移动是因为你漂浮它们。使用绝对定位（注意它的缺点！）

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

我的更改：

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

jQuery在悬停时调整div框

1 个答案: