使用 jQuery 淡出背景色

fading out the background color with jquery

本文关键字：背景色 淡出 jQuery 使用      更新时间：2023-09-26

我得到了AJAX帖子以获得如下最新评论：

function add_the_answer_to_the_list(dataString)
{
  // append this damn comment to the list
  $.ajax
  ({
    type: "POST",
    url: "home/get_answer/",
    data : dataString,
    success: function(data)
    {
      var data = jQuery.parseJSON(data);
      //append the comment
      $(
        '<li><article>'+data+ '</article></li>'
      ).hide().prependTo("#answer_list ul").fadeIn();
    }
  });

现在，当评论淡入时，我应该怎么做才能用红色突出显示评论，然后将背景颜色慢慢淡化回原始颜色？ 有没有办法在没有插件的情况下做这种事情？

谢谢

CSS：

*
{   -webkit-transition: background-color .25s ease-out;
    -moz-transition: background-color .25s ease-out;
    -o-transition: background-color .25s ease-out;
    -ms-transition: background-color .25s ease-out;
    transition: background-color .25s ease-out; }
.highlight
{   background: red; }

用于 ajax 回调函数的 JQuery：

$('<li><article>'+data+ '</article></li>')
.hide()
.prependTo("#answer_list ul")
.fadeIn(500, function() {
    $(this).addClass('highlight')
    .delay(500)
    .removeClass('highlight');
});

您可以使用 CSS3 过渡效果来执行此操作。

例

要使用的 CSS3 类 - 这将允许不透明度和背景的过渡，因此它可以"淡入"并同时更改颜色：

.comment {
opacity: 0;
background: #ff0000;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.comment-fade-in {
 background: #00ff00 /* make this your 'original color' */
 opacity: 1.0;
}

现在的javascript代码：

function add_the_answer_to_the_list(dataString)
{
// append this damn comment to the list
$.ajax
({
type: "POST",
url: "home/get_answer/",
data : dataString,
success: function(data)
{
  var data = jQuery.parseJSON(data);
  //append the comment
  var comment = $('<li><article>'+data+ '</article></li>');
  comment.addClass('comment');
  comment.prependTo("#answer_list ul");
  comment.addClass('comment-fade-in');
}

}）;

试试看

如果您不想使用 CSS3 过渡或动画，则需要一个插件。通过使用jQuery.Color插件，您可以使用jQuery的.animate()方法对背景颜色进行动画处理。

$(ele).animate({backgroundColor:'rgba(0,0,0,0)'});

问题解决了。我使用 JqueryUI 核心效果：

$(this).effect("highlight", {}, 3000);

您可以使用 jQuery UI switchClass 。示例：http://jsfiddle.net/DH8jK/1/

在您的示例中：

$.ajax
({
type: "POST",
url: "home/get_answer/",
data : dataString,
success: function(data)
{
  var data = jQuery.parseJSON(data);
  //append the comment
  $(
    '<li><article>'+data+ '</article></li>'
  ).hide().prependTo("#answer_list ul").fadeIn().switchClass('class-with-background', 'class-without-background', 2000);
}

有关详细信息，请参阅 http://jqueryui.com/switchClass/。

编辑

使用removeClass（http://jqueryui.com/removeClass/）就更容易

了 
$(
    '<li class="class-with-background"><article>'+data+ '</article></li>'
  ).hide().prependTo("#answer_list ul").fadeIn().removeClass('class-without-background', 2000);

您可以使用 jquery 颜色插件，该插件仅在缩小时1.7 KB

我创建了一个小提琴 http://jsfiddle.net/vKaYJ/

相关文章：