新消息背景高亮

我创建了一个使用ajax和php的append系统的使用评论系统现在我期待让它看起来更有吸引力，所以我想要什么时候发布新评论它应该突出显示背景像背景颜色淡入然后淡出顺利，每当新的答案是贴吧的亮点是橙色底色有人能帮助我走出这将如何做，什么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)); 
        } 
    }); 

}); 
});

来源

2016-09-27 Mark Alan

能否请您提供一个小提琴？ –

你能提供一个codepen吗？ – madalinivascu

不熟悉codepen我试图创建一个小提琴希望这将工作 –

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

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

来源

2016-09-27 06:33:42

正常的颜色将是透明的，我必须通过jquery设置过渡吗？ –

否css属性会自动创建速度为1s的线性转换（请查看上面的示例） –

https://jsfiddle.net/ercq4jx8/4/ –

你代码：

$('#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过渡或其他东西。

来源

2016-09-27 06:32:20

当我这样做时，它隐藏了所有评论，并且背景没有恢复正常，它保持你设置的不会消失 –

@MarkAlan：我更新了代码。 –

试试这个：

的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

来源

2016-09-27 07:02:51

$(() => { 
 
      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>

来源

2016-09-27 07:19:00

新消息背景高亮

回答

相关问题