animate width on multiple divs after mouseenter() jquery

Question

I'm searching a way of doing this fiddle nicely but can't seen to work... I'm still looking around google and stackoverflow's cousins to find a good solution but, naaaarrhg... no luck.

$('.box').stop().mouseenter(function(){
  var zoom = 40;
  var total = 5;
  var box = $(this);
  var altboxes = $('.box').not(box);
  var larg = (100-zoom)/(total-1);
  $(altboxes).animate({
      width:larg+"%",
    },{duration:300,queue:false});
  $(box).animate({
      width:zoom+"%",
    },{duration:300,queue:false});
});

$('.box').stop().mouseleave(function(){
  var box = $(this);
  var altboxes = $('.box').not(box);
  var total = 5;
  var larg = 100/total;
  $(box).animate({
    width:larg+"%",
  },{duration:300,queue:false});    
  $(altboxes).animate({
    width:larg+"%",
  },{duration:300,queue:false});            
});

As you can see the last div is going out and back when animating is done. And it's not what looking for here. I want the divs to nicely adapt to the parent width. I'm currently trying to fix it with function step in animate()'s options, I haven't find solution yet. (I don't really know how it works)

need your help coz i'm new to jquery (using it since oct 2013 ;) )

thanks everybody!

Answer 1

floats break

But display:inline-block with white-space:nowrap does not.

jquery:

var dur = 300;//set vars
$('.box').hover(function(){//on in
    $(this).stop().animate({ width: '40%' },dur)//animate
    .siblings('.box').stop().animate({ width: '15%' },dur);//animate sibs
}, function(){//on out
    $('.box').stop().animate({ width: '20%' },dur);//animate all          
});

css:

.grd_box {
    position:absolute;
    width:50%;
    height:50%;
    background-color:red;
    padding:5px;
    overflow:hidden;
    white-space:nowrap;/*stop line breaks*/
    font-size:0/*remove spacing on children*/
}
.box {
    position:relative;
    height:100%;
    width:20%;
    display:inline-block;/*show inline*/
    font-size:16px;/*set font size back*/
    vertical-align:top;/*align to top*/
    white-space:normal/*return whitespace*/
}

html:

<div class="grd_box">
    <div class="box a"></div>
    <div class="box b"></div>
    <div class="box c"></div>
    <div class="box d"></div>
    <div class="box e"></div>
</div>

made a fiddle: http://jsfiddle.net/filever10/eV3mH/

or if you don't want to worry about the number of elements

jquery

//set vars
var dur = 300,//duration
    box = $('.box'),//elements
    bl = box.length,//no of elements
    bi = 100/bl,//initial size
    bo = bi*2,//large size
    bs = (100-bo)/(bl-1);//small size

box.css({width: bi+'%'})//set width
.hover(function(){//on in
    $(this).stop().animate({ width: bo+'%' },dur)//animate
    .siblings().stop().animate({ width: bs+'%' },dur);//animate sibs
}, function(){//on out
    box.stop().animate({ width: bi+'%' },dur);//animate all          
});

and remove width:20%; on .box in the css.

like this: http://jsfiddle.net/filever10/h4HLR/