如何在jquery中添加Fade效果？

Question

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

1. 当我点击image1 ---＆gt; image2＆amp;的背景颜色/不透明度image3会改变。
2. 我再次点击image2 ---＆gt;背景颜色/不透明度image1＆amp; image3会改变。
3. 我再次点击image3 ---＆gt;背景颜色/不透明度image1＆amp; image2会改变。

有可能吗？

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

.target {
  background-color: #DCDCDC;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;