Разная цветовая анимация фона для каждого item.hover ()

Question

Я настраиваю новый веб-сайт и хочу внедрить некоторые анимации CSS для меню через jQuery.

Я использую WordPress для этого, и тема, которую я установил, имеет стиль мега-менюплагин.Подменю каждой ссылки меню имеет различный цвет фона.Подменю исчезают при наведении курсора мыши.

Я хочу, чтобы строка меню меняла цвет фона одновременно с постепенным исчезновением анимации подменю.Таким образом, продолжительность и т. Д. Должны идеально соответствовать.

Поскольку подменю каждой ссылки имеет различный цвет фона, я бы хотел, чтобы цвет фона строки меню соответствовал фону текущего активного подменю.Я бы начал с чего-то вроде menulink.hover ().

Важный момент: подменю постепенно исчезают, если вы поочередно наводите разные ссылки меню.Поэтому очевидно, что я хотел бы, чтобы цвет фона строки меню также исчезал друг на друга, так как различные ссылки меню были наведены.

Отказ от ответственности: у меня практически нет опыта jQuery / JS.:)

Я пробовал:

1. Переключение между классами для каждой ссылки меню и затем использование CSS для установки различных цветов фона, переходы
2. item.css (didn 'не работает, потому что я не могу установить длительность)
3. item.animate (изменение цвета фона просто не совпадает, плюс цвета не исчезают друг с другом, т.е. если вы наводите курсор мыши на ссылку меню 1'и затем' ссылка меню 2 ', цвет фона становится слегка белым между двумя изменениями цвета фона, тогда как подменю остаются с непрозрачностью 100% и плавно переходят друг в друга)

var jnews_menu = [$('#menu-item-3646'),$('#menu-item-3647'),$('#menu-item-3648'),$('#menu-item-4123')];

  //this is the variable for menu bar
  var jnews_menubar = $('.jeg_navbar');
  var jnews_nav_border = $('.jeg_nav_row');

  jnews_menu.forEach(myFunction);

  function myFunction(item, index) {
    item.hover(function(){
      switch(index) {
        case 0:
          jnews_menubar.animate({backgroundColor: "#ff3996"}, 350 );
          jnews_nav_border.animate({borderBottomColor: "transparent"}, 350) ;
          break;
        case 1:
          jnews_menubar.animate({backgroundColor: "#ff9b39"}, 350 );
          jnews_nav_border.animate({borderBottomColor: "transparent"}, 350 );
          break;
        case 2:
          jnews_menubar.animate({backgroundColor: "#9ce4ff"}, 350 );
          jnews_nav_border.animate({borderBottomColor: "transparent"}, 350) ;
          break;
        case 3:
          jnews_menubar.animate({backgroundColor: "#cd9cff"}, 350);
          jnews_nav_border.animate({borderBottomColor: "transparent"}, 350 );
          break;

      }
    }, function(){
          jnews_menubar.animate({backgroundColor: "transparent"}, 350 );
          jnews_nav_border.animate({borderBottomColor: "#4ac3ef"}, 350 );
    });
  }

Любойидеи?

Answer 1

Это связано с анимацией.Вы складываете анимации друг на друга.вместо этого используйте .stop(), чтобы очистить очередь анимации перед запуском другой анимации:

.stop().animate(

или как в этом примере, который использует CSS для transition:

var $navbar = $('.Navbar');
var $row = $navbar.find('.Navbar-row');

$row.css('backgroundColor', function() {
  return $(this).data('bg'); // Set each element background
}).on({
  mouseenter: function() {
    $navbar.css({backgroundColor: $(this).data('bg')});
  },
  mouseleave: function() {
    $navbar.css({backgroundColor: $navbar.data('bg')});
  }
});

.Navbar {
  background:#4ac3ef;
  padding: 20px;
  transition: background 0.4s;
}
.Navbar-row {
  padding: 10px;
}

<div class="Navbar" data-bg="#4ac3ef">
  <div class="Navbar-row" data-bg="#ff3996">Hover me</div>
  <div class="Navbar-row" data-bg="#ff9b39">Hover me</div>
  <div class="Navbar-row" data-bg="#9ce4ff">Hover me</div>
  <div class="Navbar-row" data-bg="#cd9cff">Hover me</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>