使用jQuery突出显示新添加的项目

Question

When a user adds a new comment (divCommentHtml) to a list of comments (divComments), I would like to highlight it for a few seconds and fade it away. How can you do this with jquery? This doesn't seem to work:

 $('#divComments').prepend($divCommentHtml).effect("highlight", {}, 2000);  

Thanks!

Answer 1

Using prepend , you're running the UI effect on the #divComments element.

Try this (assuming $divCommentHtml is a jQuery object)

$divCommentHtml.prependTo('#divComments').effect('highlight', {}, 2000);

Or perhaps

$('#divComments').prepend($divCommentHtml)
                 .find(':first').effect('highlight', {}, 2000);

Answer 2

jQuery doesn't have an effect() out of the box. Update Oh it's a jQuery UI thing. Carry on :)

$divCommentHtml.prepentTo('#divComments').effect("highlight", {}, 2000);

I changed how it works so your method is being ran on the actual $divCommentHtml object.

Answer 3

Another alternative is to give $divCommentHtml an ID then run the effect after it's prepended

$divCommentHtml = '<div id="myID">Some Contents</div>'
$('#divComments').prepend($divCommentHtml);    
$( "#myID" ).effect( 'highlight', {}, 2000);

Answer 4

You are missing parenthesis around divCommentHtml . Check Live demo

$('#divComments').prepend($(divCommentHtml)).effect("highlight", {}, 2000);