Я создал своего рода слайдер, который создает более крупный элемент, когда вы его наводите.
Я создал скрипку сведенного кода, чтобы показать, в чем моя проблема. В скрипке зеленый элемент иногда переполняется до следующей строки, заставляя его исчезнуть на короткое время. Есть ли способ решить эту проблему, сохраняя синхронизацию анимации?
Смотрите скрипку
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. Я нашел решение этой проблемы здесь. (font-size: 0; fix)
Проверьте 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;
}
Попробуй это
jQuery('.item', '.row').hover(function(){
curItem = jQuery(this);
jQuery('.item', '.row').stop().not(curItem).animate({
width: '19.90%'
},200);
curItem.animate({
width: '40%'
},200);
});