新消息背景突出显示答案

【问题标题】：New message background highlighting新消息背景突出显示
【发布时间】：2017-02-04 15:40:52
【问题描述】：

我已经创建了一个使用 ajax 和 php 并使用附加系统的评论系统，现在我希望让它看起来更有吸引力，所以我希望在发布新评论时它应该突出显示背景，如背景颜色淡入，然后平滑淡出，就像每当发布新答案时都会用橙色背景颜色突出显示任何人都可以帮我弄清楚它是如何完成的以及使用什么 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));
                    }
    });

});
});

【问题讨论】：

你能提供一个小提琴吗？
你能提供一个codepen吗？
不熟悉 codepen 我正在尝试创建一个小提琴希望这会起作用
jsfiddle.net/ercq4jx8 这是小提琴
@AbhayNaik 我添加了外部 ajax 文件，但不知道它是否正确添加，因为我是小提琴新手

标签： javascript php jquery css

【解决方案1】：

您的代码：

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

无法工作，因为数据是文本。你必须做出类似的东西

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

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

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 转换或其他操作。

【讨论】：

当我这样做时它隐藏了所有 cmets 并且背景没有恢复正常它保持你设置的没有淡出

【解决方案2】：

您可以使用transition: background-color 1s linear; css 属性。将初始背景设置为评论 div 并添加上述属性。然后将 div 的背景（变为橙色）更改为淡入淡出效果，在 setTimeout 删除此背景后，它会产生淡入淡出效果。查看this 示例以供参考。

另一种方法是使用 CSS 的动画属性。举个例子here

【讨论】：

正常颜色将是透明的，我必须通过 jquery 设置过渡？？
no css 属性会自动创建速度为 1s 的线性过渡（查看上面的示例）
请检查颜色是否保持红色
我找到了另一种方法来做到这一点。检查jsfiddle.net/AjayPalSingh/qcoqw5rp/3这个..

【解决方案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

【讨论】：

【解决方案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>

【讨论】：