我正忙于一个网站,它需要丰富多彩,所以我得到了一个颜色列表,我想:“嘿!让我们通过单击某些菜单项来切换容器顶部。”所以我决定使用 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
,但没有一个像我想要的那样工作。可以实现我想要的吗?
谢谢
最佳答案
您应该能够淡出当前元素(通过将不透明度动画设置为 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>
关于javascript - 颜色切换动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26890849/