在 mouseenter() jquery 之后在多个 div 上设置动画宽度

Question

我正在寻找一种方法来很好地做到这一点 fiddle 但看不到工作... 我仍在寻找谷歌和 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 会在动画完成后出现并返回。这不是在这里寻找的东西。我希望 div 能够很好地适应父宽度。我目前正在尝试使用 animate() 选项中的 function step 来修复它，我还没有找到解决方案。 （我真的不知道它是如何工作的）

需要你的帮助，因为我是 jquery 的新手（从 2013 年 10 月开始使用它；））

谢谢大家！

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

并删除 css 中 .box 上的 width:20%;。

像这样： http://jsfiddle.net/filever10/h4HLR/