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

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 に答える
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

CSS3トランジションやアニメーションを使用したくない場合は、プラグインが必要です。jQuery.Colorプラグインを使用すると、 jQueryの.animate()メソッドを使用して背景色をアニメーション化できます。

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

問題が解決しました。JqueryUIコアエフェクトを使用します：

$(this).effect("highlight", {}, 3000);
于 2013-01-23T15:02:13.877 に答える
0

jQueryUIを使用できます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 に答える