彩色开关上的动画 [英] Animation on color switch

问题描述

我在网站上很忙，它必须是彩色的，所以我得到了一个颜色列表，就像:嘿！让我们在单击某些菜单项时切换容器顶部."因此，我决定使用jQuery数据属性:

I'm busy on a site, and it needs to be colorfull, so I got a list of colors, and I was like: "Hey! Lets switch container tops on click of certain menu items." So I decided to use the jQuery data attribute:

<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代码:

So I defined the data-color at every item, lets get onto the actual jQuery code:

 $(".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，但是没有一个能像我想要的那样工作.可以实现我想要的吗?

But now, when the color switches I want to fade out the old color and fade in the new one. I tried various options like fadeToggle or using slideUp and slideDown at once, but non of it worked like I wanted it. Is it possible to achieve what I want?

谢谢

推荐答案

您应该能够淡出当前元素(通过将不透明度动画化为0)，更新背景色，然后在其后淡入动画完成(原始动画完成时，jquery的动画会回调).我整理了一个相当普通的示例，以在下面进行说明.

You should be able to just fade out the current element (by animating the opacity to 0), update the background color, and then fade it back in after that animation completes (jquery's animate takes a callback for when the original animation is completed). I've put together a fairly generic example to illustrate this below.

$('.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>

这篇关于彩色开关上的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！