User 13204940 Ответов: 1

Одновременная анимация jquery

Привет
У меня возникли трудности с тем, чтобы мои анимации работали так, как ожидалось. Вот как это должно работать на div:

• При наведении курсора мыши анимируйте свойство color на синий цвет
• При наведении курсора мыши анимируйте его в серый цвет

У меня есть с этим работа:
$(".animatable").mouseover(function()
{
    $(this).animate({color: "rgb(102,183,226)"}, {duration: 500, queue: false});
});
и
$(".animatable").mouseout(function()
{
    $(this).animate({color: "rgb(200,200,200)"}, {duration: 500, queue: false});
});
Проблема возникает, когда я быстро перемещаю курсор мыши на два элемента в контейнере div.

Допустим, у меня есть следующий код;
<div class="container">
    <div class="animatable">Test 1</div>
    <div class="animatable">Test 2</div>
</div>
При такой настройке синяя анимация запускалась и внезапно менялась на белую без задержки, даже если курсор оставался на элементе. Это звучит так, как будто предыдущий mouseout был обработан в это время, т. е. проблема очередей.

Как я могу изменить свой код, чтобы это произошло, учитывая, что одновременно с элементом может произойти несколько других анимаций, таких как изменение высоты?

Спасибо

Что я уже пробовал:

-------------------------------------------------------------------------

1 Ответов

Рейтинг:
0

Richard Deeming

Избегайте использования Javascript для анимации. Здесь было бы достаточно перехода CSS:

.animatable
{
    color: #c8c8c8;
    transition: color 0.5s;
}
.animatable:hover
{
    color: #66b7e2;
}

Использование CSS-переходов - CSS | MDN[^]

[no name]

Таким образом, он работает по большей части, но с моей навигационной панелью, которая включает в себя несколько вложенных дивов, переход не работает на выпадающих элементах. У каждого есть класс 'dropdown_item', я использую .mouseover(function() { $(this).css("color", "blue"); } и .dropdown_item { transition: color 0.5 s; }. по какой-то причине свойство color меняется, но это происходит мгновенно. Я должен использовать событие mouseover вместо CSS :hover из-за того, что мне нужно распространение, чтобы родительский элемент оставался синим, когда открыто выпадающее меню

Richard Deeming

Если они вложены, :hover на родительский элемент все равно следует наносить курсор мыши, когда он находится над дочерним элементом.

Можете ли вы создать простую демонстрацию этой проблемы в JSFiddle[^]?

[no name]

Кажется, я не могу заставить JSFiddle работать, но вот веб-сайт: https://website-dev.sip2sip.net/. Вы можете видеть, что основные навигационные элементы переходят правильно, но элементы в раскрывающемся списке продукты-нет.

Richard Deeming

Является ли этот сайт общедоступным? Для меня это тайм-аут.