Question

JS:

$(function() {

$('.click_hide li').click(function() {
    var $list = $("ul.system_messages"),
        $this = $(this);

    $this.slideUp('fast', function() {
        $this.remove();
    });
});

$('.click_show li').click(function() {

    if ($('.click_hide li').is(":visible")) {
        $('.click_hide li').slideUp('fast', function() {
            $('.click_hide li').hide();


        });
    }
    if ($('.click_hide li').is(":hidden")) {
        $('.click_hide li').slideDown('fast', function() {
            $('.click_hide li').show();

        });
    }



});

});​

HTML:

<ul class="notification click_hide">
    <li>New product has been purchased</li>
    <li>Product out of stock</li>
</ul>
<ul class = "click_show">
    <li>Show Notifications</li>
</ul>

CSS:

ul{
    border: 1px solid;   
    cursor: pointer;
}​

I have this sample notification script that show/hide notifications and delete the field whenever the notification is clicked.

What i want to do is that when new <li> field was inserted dynamically. I want to detect that new field and highlight it for example change the color of the field to red. or produce a text saying the there’s a new notification.

jsfiddle: http://jsfiddle.net/tmL7m/4

Answer 1

When you load the content to the notiification div, change the color for 5 seconds or so. and then go back to normal color. You can use setTimeout for this.

If you already have jQuery UI plugin included in your page, you can use the highlight method

  $("ul.system_messages").load("load_from_server.php",function(){
        $(this).effect("highlight", {}, 3000);
   });

http://docs.jquery.com/UI/Effects/Highlight