Я получил сообщение 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();

    }
  }); 

Теперь, когда комментарий исчезает, что я должен сделать, чтобы выделить комментарий красным цветом, а затем медленно вернуть фоновый цвет к исходному цвету? Есть ли способ сделать эту вещь без плагинов?

Благодарность

0
under5hell 23 Янв 2013 в 17:28

6 ответов

Лучший ответ

Задача решена. Я использую основной эффект JqueryUI:

$(this).effect("highlight", {}, 3000);
1
under5hell 23 Янв 2013 в 15:02

Вы можете использовать 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);
0
iappwebdev 23 Янв 2013 в 13:55

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

JQuery для вашей функции обратного вызова ajax:

$('<li><article>'+data+ '</article></li>')
.hide()
.prependTo("#answer_list ul")
.fadeIn(500, function() {
    $(this).addClass('highlight')
    .delay(500)
    .removeClass('highlight');
});
1
Eric 23 Янв 2013 в 13:53

Вы можете использовать плагин цвета jquery, который просто 1.7 KB при минимизации

Я создал скрипку http://jsfiddle.net/vKaYJ/

0
Varinder Singh 23 Янв 2013 в 14:25

Для этого нужен плагин, если вы не хотите использовать CSS3 переходы или анимацию. Используя плагин jQuery.Color, вы можете анимировать цвет фона с помощью {{X0} jQuery } метод.

$(ele).animate({backgroundColor:'rgba(0,0,0,0)'});
1
Licson 23 Янв 2013 в 13:58

Вы можете использовать эффект CSS3 Transition.

Пример

Используемый класс 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');
}

});

Попробуй это

1
jenovachild 23 Янв 2013 в 13:53