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

【问题标题】：How to add Fade to effect in jquery?如何在jquery中添加淡入淡出效果？
【发布时间】：2015-04-20 17:09:07
【问题描述】：

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

当我点击image1时--->image2和image3的背景颜色/不透明度会改变。
我再次点击image2 --->image1 和image3 的背景颜色/不透明度将会改变。
我再次点击image3 --->image1 和image2 的背景颜色/不透明度将会改变。

有可能吗？

【问题讨论】：

What have you tried so far?

【解决方案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="http://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>

【讨论】：

我可以使用哪个插件？ @T.J。克劳德
@MD.ShahabUddin: "...比如jQuery UI内置的那个..." 或者直接搜索“jQuery color animation plugin”。
3 张图片将保留在一行中。示例：[image1[image2[image3]]。 image1 ---> image2 & image3 的背景颜色会改变。我将再次单击 image2 ---> image1 和 image3 的背景颜色会改变。我将再次单击 image3 ---> image1 和 image2 的背景颜色将更改 @ T.J.克劳德
@MD.ShahabUddin：你只需要在它们后面放置不同的容器元素，并在更改内容时为相关容器元素的颜色设置动画。