淡出的背景顏色與jQuery

我得到了AJAX後得到像下面的最新評論：淡出的背景顏色與jQuery

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

    } 
    });

現在，當評論中我應該怎麼辦褪色突出與紅色註釋，然後慢慢地淡化背景顏色回到原來的顏色？有沒有辦法做到這一點，沒有插件的東西？

感謝

來源

2013-01-23 under5hell

問題解決的jQuery插件的顏色。我使用JqueryUI核心效果：

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

來源

2013-01-23 15:02:13 under5hell

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

}）;

試一下

來源

2013-01-23 13:30:56 jenovachild

不支持IE！ – iappwebdev

好主意，你會給我一個例子如何在代碼上實現該技術？ – under5hell

舉個例子，在http://www.w3schools.com/css3/tryit.asp？filename = trycss3_transition1 – iappwebdev

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

來源

2013-01-23 13:46:37 Eric

您可以使用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-23 13:55:23 iappwebdev

需要一個插件，如果你不希望使用CSS3過渡或動畫。通過使用jQuery.Color插件，您可以使用jQuery的.animate()方法爲背景顏色設置動畫。

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

來源

2013-01-23 13:58:51 Licson

您可以使用它僅僅是1.7 KB精縮

當我創建了一個小提琴http://jsfiddle.net/vKaYJ/

來源

2013-01-23 14:25:55

請仔細閱讀我的問題小夥子。我需要這樣做，沒有插件。謝謝 – under5hell

淡出的背景顏色與jQuery

回答

相關問題