Question

目前每个人都谈到两个解决方案：

jQuery UI插件 - ＆gt;不可行，因为它占用太多空间
jQuery Color（http://api.jquery.com/animate/） - ＆gt;不可行，因为我实际上无法获得下载插件的链接

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

Answer 1

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

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

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

See a live example using jQuery Color.

您还可以使用CSS3 transitions。

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");

See a live example using CSS· transitions.

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

Answer 3

我从不尝试，但你可以使用rgba

进行动画制作

rgba（0,255,0,1）=＆gt; 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');

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

 #id{
   opacity:1;
  }

 #id:hover{
   opacity: 0.8;
 }

Answer 6

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

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

6 个答案: