Переполнение анимированного элемента ширины в jQuery

Question

Переполнение анимированного элемента ширины в jQuery

0

Я создал своего рода слайдер, который создает более крупный элемент, когда вы его наводите.

Я создал скрипку сведенного кода, чтобы показать, в чем моя проблема. В скрипке зеленый элемент иногда переполняется до следующей строки, заставляя его исчезнуть на короткое время. Есть ли способ решить эту проблему, сохраняя синхронизацию анимации?

Смотрите скрипку

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)

Sander Koedood 13 дек. 2013, в 12:36

Источник

Теги:

javascript

jquery

html

css

2 ответа

0

Попробуй это

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

Nikhil Kudtarkar 13 дек. 2013, в 09:37

0

Я уже пробовал это. Но это не полностью решает проблему, так как иногда все еще мерцает (но гораздо реже). Но главная проблема этого метода заключается в том, что он оставляет не очень красивый разрыв с графикой полной ширины.
Sander Koedood 13 дек. 2013, в 11:55
0

да это верно .. изменить ширину CurItem.animate ?? сделать это до 39% ? Я вижу меньше мерцания таким образом
Nikhil Kudtarkar 13 дек. 2013, в 11:58
0

Как я уже сказал, основная проблема этого метода заключается в том, что в конце он оставляет не очень красивый пробел, где обычно будет хорошая полноразмерная графика. 1% от 1000 пикселей - это видимый разрыв в 10 пикселей, а поскольку среднее разрешение экрана выше, это означает, что все увидят еще больший разрыв.
Sander Koedood 13 дек. 2013, в 12:05
0

Посмотрите ответ АндреРоски, он выглядит чистым
Nikhil Kudtarkar 13 дек. 2013, в 12:20

Показать ещё 2 комментария

Ещё вопросы

Я уже пробовал это. Но это не полностью решает проблему, так как иногда все еще мерцает (но гораздо реже). Но главная проблема этого метода заключается в том, что он оставляет не очень красивый разрыв с графикой полной ширины.
да это верно .. изменить ширину CurItem.animate ?? сделать это до 39% ? Я вижу меньше мерцания таким образом
Как я уже сказал, основная проблема этого метода заключается в том, что в конце он оставляет не очень красивый пробел, где обычно будет хорошая полноразмерная графика. 1% от 1000 пикселей - это видимый разрыв в 10 пикселей, а поскольку среднее разрешение экрана выше, это означает, что все увидят еще больший разрыв.
Посмотрите ответ АндреРоски, он выглядит чистым

Andrei Rosca · Accepted Answer · 2013-12-13T09-08-00.000Z

Проверьте 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;
}

Кросс-браузерная совместимость - вещь в этом случае. Я предположил отображение: встроенный блок не работал в IE8. Оказывается, это делает это хорошим решением. Спасибо.