0

我收到了 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();

    }
  });

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

谢谢

4

6 回答 6

1

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

$(this).effect("highlight", {}, 3000);
于 2013-01-23T15:02:13.877 回答
1

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

$(ele).animate({backgroundColor:'rgba(0,0,0,0)'});
于 2013-01-23T13:58:51.260 回答
1

您可以使用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');
}

});

试试看

于 2013-01-23T13:30:56.927 回答
1

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');
});
于 2013-01-23T13:46:37.683 回答
0

您可以使用 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);
于 2013-01-23T13:55:23.123 回答
0

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

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

于 2013-01-23T14:25:55.630 回答