jQuery resize div box at hover

问题

I've got two parts of code, to make 3 things:

• resize at one time only one of 6 .boxes div (with it's text content)
• make transparent .box divs which aren't selected
• 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');
        });

But somethings is wrong. Only first of the boxes works quite good, but it's does'nt cover up other boxes when is resized.

Effect of it You can see here: jsFiddle

And my question: is it possible, to unify this code and make it works? :-[

回答1:

Your code is very mixed up. I looks like you pieced it together. Unfortuantly don't have the time to clean it up for you, so here are some general tips:

• For one .hover() does exactly the same as binding both mouseover and mouseout, so your boxes unnecessarily have two handlers for the same events. Also you are binding one in the document ready event and the other not, which is inconsistent.
• You'll need to add stop()s to the dimming and (un)dimming animations because thy queue up and keep going. Read the documention because you'll most likey need to set the clearQueue and jumpToEnd parameters.
• The boxes shift because you are floating them. Use absolute positioning instead (watch out for it's disadvantages!)

---

UPDATE: I've edited your code: http://jsfiddle.net/Puuxj/7/

My changes:

• Removed the class hover and used .not(this) instead. (Unless need the class for something else...)
• Added parameters to .stop().
• Used mouseenter/mouseleave instead of mouseover/mouseout.
• Positioned the elements absolute

来源：https://stackoverflow.com/questions/5703480/jquery-resize-div-box-at-hover