ширина одушевленные на несколько дивы после MouseEnter() JQuery

Question

Я ищу способ сделать это fiddle красиво, но не видел, чтобы работать ... Я все еще озираясь Google и StackOverflow-х кузенов найти хорошее решение, но, naaaarrhg ... не повезло.

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

Как вы можете видеть, последний div выходит и назад, когда выполняется анимация. И это не то, что нужно искать здесь. Я хочу, чтобы divs хорошо адаптировались к ширине родителя. В настоящее время я пытаюсь исправить это с помощью шага функции в параметрах animate(), я еще не нашел решение. (Я не знаю, как это работает)

нужна ваша помощь кузен я новичок в JQuery (используя его с октября 2013 года;))

благодарит всех!

Answer 1

поплавки перерыв

Но display:inline-block с white-space:nowrap не.

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> 

сделал скрипку:http://jsfiddle.net/filever10/eV3mH/

или если вы не хотите, чтобы беспокоиться о количестве элементов

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   
}); 

и удалить width:20%; на .box в CSS.

так:http://jsfiddle.net/filever10/h4HLR/