jquery - 如何使用jQuery淡化背景颜色？

Question

目前每个人都在谈论两种解决方案：

1. jQuery UI 插件 --> 不可行，因为它占用了太多空间
2. jQuery Color (http://api.jquery.com/animate/) --> 不可行，因为我实际上无法获得要下载的插件的链接

所以我的问题是，我可以使用 jQuery v1.7.2 来实现这种效果的最小插件是什么？

Answer 1

您可以jQuery Color从其 GitHub 存储库中获取该插件。

span.value {
  background-color: #0f0;
}

$("span.value").animate({
  backgroundColor: "transparent"
}, 'slow');

查看使用 jQuery Color 的实时示例。

---

您还可以使用CSS3 过渡。

span.value {
  background-color: #0f0;
  -o-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -webkit-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.fade {
  background-color: transparent;
}

$("span.value").toggleClass("fade");

查看使用 CSS· 转换的实时示例。

Answer 2

如果您最终选择不使用 jQuery 颜色插件，您可以使用 CSS 过渡：

<button id="fadeTrigger">fade with jQuery <span>(and CSS...)</span></button>

<div id="target" class="base">
    <p>some text in the targetted div element</p>
</div>​

和 jQuery：

$('#fadeTrigger').click(
    function(){
        $('#target').toggleClass('base highlighted');
    });​

和 CSS：

button {
    font-size: 1em;
}

button span {
    font-size: 0.6em;
    font-style: italic;
}

#target.base {
    background-color: #fff;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

#target.highlighted {
    background-color: #f90;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

JS 小提琴演示。

Answer 3

我从不尝试，但你可以用 rgba 制作动画

rgba(0, 255, 0, 1) => rgba(0, 255, 0, 0)

Answer 4

你可以通过动画尝试做到这一点

 $('span').animate({'backgroundColor' : '#ffff99'});

或尝试

 $("span").fadeOut("slow").css("background-color", "#ffff99");

Answer 5

您可以将这些插件与

<script type="text/javascript" src=""></script> 

在您的head标签中，而不必下载它们。

尝试

 $(this).animate({ backgroundColor: '#HEXCODE' }, 'fast');

或者，您可以opacity在悬停时使用 CSS 中的属性。

 #id{
   opacity:1;
  }

 #id:hover{
   opacity: 0.8;
 }

Answer 6

我写了一个非常简单的 jQuery 插件来淡化颜色。它可能需要一点抛光，但我认为这就是你所追求的。你可以在这里查看：https ://gist.github.com/4569265