jQuery анимированная ширина элемента переполнения

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

---

Edit: Используя принятый ответ, я наткнулась на дополнительная проблема. Div в фактическом коде заканчивается пробелом после каждого div. Я нашел решение этой проблемы here. (Размер шрифта: 0; х)

Answer 1

Проверить http://jsfiddle.net/j4aN6/2/. Вы можете заставить его работать с некоторыми хаками css, но я рекомендую использовать переходы 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); 
});