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（）的选项中的功能步骤进行修复，我还没有找到解决方案。（我真的不知道它是如何工作的）

需要你的帮助因为我是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中width:20%;上的.box。

喜欢这样： http://jsfiddle.net/filever10/h4HLR/

mouseenter（）jquery之后多个div上的动画宽度

1 个答案: