Question

我创建了一种滑块，当你将它悬停时会创建一个更大的项目。

我创建了一个缩小代码的小提示，以显示我的问题是什么。在小提琴中，绿色物品有时溢出到下一行，使其消失一会儿。有没有办法解决这个问题，同时保持动画同步？

请参阅fiddle

jQuery就像：

一样简单

jQuery('.item', '.row').hover(function(){
    curItem = jQuery(this);
    jQuery('.item', '.row').stop().not(curItem).animate({
        width: '20%'
    },200);
    curItem.stop().animate({
        width: '40%'
    },200); 
});

使用以下相关的css：

.row {
    width: 100%;
    height: 100px;
    overflow: hidden;
}

.item {
    width: 25%;
    height: 100px;
    float: left;
}

编辑：使用接受的答案，我偶然发现了一个额外的问题。实际代码中的div最终在每个div后面都有一个空格。我找到了该问题的解决方案here。（font-size：0;修复）

Answer 1

检查http://jsfiddle.net/j4aN6/2/。你可以使用一些css hacks，但我建议使用flexbox或css过渡。

.row {
    width: 100%;
    height: 100px;
    overflow: hidden;
    white-space:nowrap;
    font-size:0;
}

.item {
    width: 25%;
    height: 100px;
    display:inline-block;
}

Answer 2

试试这个

jQuery('.item', '.row').hover(function(){
    curItem = jQuery(this);
    jQuery('.item', '.row').stop().not(curItem).animate({
        width: '19.90%'
    },200);
    curItem.animate({
        width: '40%'
    },200); 
});

jQuery动画宽度项溢出

2 个答案: