Question

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

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

我想做的是让菜单栏在子菜单动画淡入淡出的同时更改背景颜色。因此持续时间等应完美匹配。

由于每个链接的子菜单具有不同的背景色，我希望菜单栏的背景色与当前活动的子菜单的背景相匹配。我会以像menulink.hover（）之类的东西开始。

要点：如果轮流悬停不同的菜单链接，则子菜单会彼此淡入淡出。所以很明显，我希望菜单栏的背景颜色也能够随着不同的菜单链接悬停而彼此淡入。

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

我尝试过：

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

或类似此示例，其中transition使用CSS：

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>

每个项目都有不同的背景色动画。hover（）

1 个答案: