Mark Alan Mark Alan - 1 year ago 109
jQuery Question

New message background highlighting

I have created a comment system using ajax and php with the usage of append system now I am looking to make it look more attractive so I want when ever a new comment is posted it should be highlighted background like background color fadein and then fadeout smoothly like whenever new answer is posted it is highlighted with an orange background color can anyone help me out how it would be done and what jquery function is used

my jquery

$(document).ready(function() {
$('#sub_comment').on('click', function() {
var comment = $('#comment').val();
var store_id = $('#store_id').val();

$(document).ajaxStart(function() {
$('#wait').css('display', 'block');

$(document).ajaxComplete(function() {
$('#wait').css('display', 'none');

type : "POST",
data : {comment: comment, store_id: store_id, command: 'Comment'},
dataType : 'text',
url : "includes/get_data.php",
success : function(data) {


Answer Source

you can use the transition: background-color 1s linear; css property. Set initial background to the comment div and add the above property. Then change the background (to orange) of the div, it will create a fadein effect and after some setTimeout remove this background, then it will create a fadeout effect. Check this example for reference.

Another way is to use the animation property of CSS. An example is given here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download