CODEWITHSUNDEEP
jqueryhtmlresizehoverjquery-animate
cachaito
cachaito

Reputation: 343

jQuery resize div box at hover

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

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? :-[

Upvotes: 1

Views: 10962

Answers (1)

RoToRa
RoToRa

Reputation: 38400

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

Upvotes: 2

Related Questions