每个 item.hover() 的不同背景颜色动画

Question

我正在建立一个新网站，并想通过 jQuery 为菜单实现一些 css 动画。

我为此使用 WordPress，并且我安装的主题有一个大型菜单样式插件。每个菜单链接的子菜单具有不同的背景颜色。鼠标悬停时子菜单淡入。

我想要做的是让菜单栏在子菜单的动画淡入的同时改变背景颜色。所以持续时间等应该完美匹配。

由于每个链接的子菜单都有不同的背景颜色，我希望菜单栏的背景颜色与当前活动子菜单的背景相匹配。我想它会从 menulink.hover() 之类的东西开始。

重要的一点：如果您轮流悬停不同的菜单链接，子菜单会相互淡入。所以很明显我希望菜单栏的背景颜色也可以随着悬停不同的菜单链接而相互淡入。

免责声明：我几乎没有 jQuery/JS 经验。 :)

我试过了：

1. 在每个菜单链接的类之间切换，然后使用 CSS 设置不同的背景颜色、过渡效果
2. item.css（没有工作，因为我无法设置持续时间）
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>