Question

我已经创建了一个使用ajax和php的评论系统，现在使用追加系统我想让它看起来更有吸引力所以我想要在发布新评论的时候应该突出显示背景颜色fadein等背景平滑淡出，就像每当发布新答案时，它会以橙色背景颜色突出显示任何人都可以帮助我完成它将如何完成以及使用什么jquery功能

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

    $.ajax({
        type     :  "POST",
        data     :  {comment: comment, store_id: store_id, command: 'Comment'},
        dataType :  'text',
        url      :  "includes/get_data.php",
        success  :  function(data) {
                        $('#comment').val('');
                        $('#comments').append($(data).hide().fadeIn(2000));
                    }
    });

});
});

Answer 1

您可以使用transition: background-color 1s linear; css属性。将初始背景设置为注释div并添加上述属性。然后改变div的背景（到橙色），它会创建一个fadein效果，并在一些setTimeout删除这个背景后，它会创建一个fadeout效果。查看this示例以供参考。

另一种方法是使用CSS的动画属性。给出了一个示例here

Answer 2

您的代码：

$('#comments').append($(data).hide().fadeIn(2000));

无法正常工作，因为数据是文本。你必须做类似

的事情

$('#comments').append(data).hide().fadeIn(2000);

但这将始终隐藏所有评论并再次显示。解决方法是将新注释放到新容器中，只处理这个：

var comments = $('#comments').append('<div>' + data + '</div>');
$('div',comments).css('background-color','');
var newcom = $('div:last-child',comments);
newcom.hide().css('background-color','#ffff00').fadeIn(2000);

使用newcom对象，您可以执行任何css转换或其他操作。

Answer 3

试试这个：

的Javascript

$(document).ready(function() {
  $('#sub_comment').on('click', function() {
    var apend_data = '<div class="data orange"><p>Hello World</p></div>';
    $('#comments').append($(apend_data).hide().fadeIn(2000));
    setTimeout(function() {
      $("#comments .data").removeClass('orange');
    }, 1000);
  });
});

的CSS

#comments {
  width: 100%;
}

.data {
  padding: 15px;
  border: 1px solid #000;
  margin: 10px auto;
}

.orange {
  background-color: orange;
}

HTML

<div id="comments">
  <div class="data">
    <p>
      Hello World
    </p>
  </div>
</div>
<button id="sub_comment">
  Click Me
</button>

fiddle

Answer 4

  $(() => {
            var index = 1;
            $('#btnSubmit').on('click', () => {
                 
                $("#conteiner").append('<p id="_' + index + '" style="display:none;width:50%" class="backColor"> ' + $('#txtComment').val() + ' </p>');
                var id = "#_" + index + "";
                $(id).fadeIn();
                index++;

                setInterval(function () {
                    $(id).removeClass('backColor');
                }, 1000);
            });

        });

 .backColor {
         background-color:red;
        }

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class='row' id='conteiner' style="padding-left:50px">

    </div>
    <br />
    <div class='row' style='width:50%;padding-left:50px'>
        <form>
            <div class="form-group">
                <input type="text" class="form-control" id="txtComment" placeholder="comment">
            </div>
            <button type="button" class="btn btn-default" id='btnSubmit'>Submit</button>
        </form>
    </div>
  
      
    
</body>

</html>

突出显示

4 个答案: