Question

我正在构建一个包含四个链接的简单导航菜单。该菜单有一个灰度级的背景图像，分为四个部分，当悬停在上面时，将在背景图像的彩色部分中淡入淡出，基本上会在鼠标上方创建饱和/去饱和效果。使用的代码可以工作，但仅适用于四个切片中的一个。我需要弄清楚如何让每个项目分别淡入。在弄乱代码的同时，我已经能够得到一个或全部在悬停时淡入，但无法弄清楚如何＆＃34;打破＆＃34;他们了。

 $(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);
}
});
});

下面是发生什么事的照片 http://i.imgur.com/KZBlHxo.jpg
http://i.imgur.com/20iW8UM.jpg

Answer 1

难道你不能用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

使导航项目分开淡化图像

1 个答案: