如何在 jquery 中添加淡入淡出效果

Question

我有 3 张图片，我需要执行以下操作，

1. 当我点击image1 --->image2和image3的背景颜色/不透明度会改变。
2. 我再次点击image2 --->背景颜色/image1和image3的不透明度将发生变化。
3. 我再次点击image3 --->背景颜色/image1和image2的不透明度将发生变化。

可能吗？

Answer 1

是的，这是可能的。你需要一个jQuery颜色动画插件（jQuery本身不会对颜色值进行动画处理），比如jQuery UI中的插件。然后简单地使图像的背景透明，并在每个图像后面的容器中获取背景颜色，并使用animate对背景颜色进行动画处理，将其从一个值更改为另一个值，例如：

$("selector for the background").animate({
    backgroundColor: "target color" // Requires plugin, see above
});

$(".target").delay(250).animate({
  backgroundColor: "#FEFE00"
}, 1500);

.target {
  background-color: #DCDCDC;
}

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<div class="target">
  <img src="https://i.stack.imgur.com/LLYDl.png">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>