javascript - 颜色切换动画

Question

我正忙于一个网站，它需要丰富多彩，所以我得到了一个颜色列表，我想:“嘿!让我们通过单击某些菜单项来切换容器顶部。”所以我决定使用 jQuery 数据属性:

<a onclick="loadSubmenu(5)" class="item" data-color="006496"> <div class="point" id="blauw">
                <p>Leden</p>
            </div></a>
            <a onclick="loadSubmenu(4)" class="item" data-color="169600"> <div class="point" id="groen">
                <p>Game</p>
            </div></a>
            <a onclick="loadSubmenu(3)" class="item" data-color="967F00"> <div class="point" id="geel">
                <p>Radio</p>
            </div></a>
            <a onclick="loadSubmenu(2)" class="item" data-color="964B00"> <div class="point" id="oranje">
                <p>Nieuws</p>
            </div></a>
            <a onclick="loadSubmenu(1)" class="item" data-color="960000"> <div class="point" id="currentrood">
                <p>Home</p>
            </div></a>

所以我在每个项目上定义了data-color，让我们开始了解实际的 jQuery 代码:

 $(".item").click(function(){
        backgroundKleur = '#' + $(this).data('color');

        changeColors(backgroundKleur);

        $(".item").removeClass('bold-font');
        $(this).addClass('bold-font');

    });
function changeColors(backgroundKleur){
    $("#submenu-container").css('background-color', backgroundKleur);
    $(".content_small_top").css('background-color', backgroundKleur));
}

但是现在，当颜色切换时，我想淡出旧颜色并淡入新颜色。我尝试了各种选项，例如 fadeToggle 或同时使用 slideUp 和 slideDown，但没有一个像我想要的那样工作。可以实现我想要的吗？

谢谢

Answer 1

您应该能够淡出当前元素(通过将不透明度动画设置为 0)，更新背景颜色，然后在动画完成后将其淡入(jquery 的 animate 在原始动画结束时进行回调)完全的)。我在下面整理了一个相当通用的示例来说明这一点。

$('.fader').on('mouseenter', function() {
  var $this = $(this);
  $this.animate({
    opacity: 0
  }, 1000, function() {
    $this.css('background', 'blue');
    $this.animate({
      opacity: 1
    });
  });
})

.fader {
  width: 150px;
  height: 150px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="fader"></div>