使得导航项目分离衰落图像

making navigation items separate fading images

本文关键字：图像 分离 项目 导航      更新时间：2023-09-26

我正在构建一个带有四个链接的简单导航菜单。菜单有一个灰度背景图像，分为四部分，悬停在上面时，背景图像的彩色部分会褪色，基本上会在鼠标悬停时产生饱和/去饱和效果。我使用的代码可以工作，但只适用于四个切片中的一个。我需要弄清楚如何让每一件物品分别淡出。在处理代码时，我能够在悬停时让其中一个、一个或全部淡出，但不知道如何"分解"它们。

 $(document).ready(function () {
$('div.menu').hover(function() {
var fade = $('.one', this);

if (fade.is(':animated')) {
  fade.stop().fadeTo(250, 1);
} else {
  fade.fadeIn(250);
}
}, function () {
var fade = $('.one', this);
if (fade.is(':animated')) {
  fade.stop().fadeTo(500, 0);
} else {
  fade.fadeOut(500);
}
});
});

下面是发生的事情的图片
https://i.stack.imgur.com/kUiwe.jpg
https://i.stack.imgur.com/Zn6RN.jpg

你能用CSS做到这一点吗？这是一个带有转换的示例

.menu-item{
opacity:1;
transition: opacity .2s linear;
}
.menu-item:hover {
opacity:0;
}

这是另一个CSS动画

.menu-item:hover{
animation: fade;
-webkit-animation: fade;
}
@keyframes fade{
from{opacity:1;}
to {opacity:0;}
}
@-webkit-keyframes fade{
from{opacity:1;}
to {opacity:0;}
}

您可以添加延迟参数、时间、迭代次数等。http://www.w3schools.com/css/css3_animations.asp

相关文章：