adding effect in appended element

Question

This is the fiddle. There is a list group. By clicking "Add" button a popup will come at where there is a "Create" button. After clicking on the "Create" button, sample list item will be added before the "Add" button in the list group.

Now, I want some effect so that user can understand at where the created list-item has been added. So, I'm thinking adding a different color in the appended element and disappearing the different color smoothly like fadeOut(). That's why, at the time of appending, I've added a new class named .temp and styled it. so, after adding the "Created List", it looks different. Now, how can I remove the .temp class instantly (within 2/3 second maybe) and smoothly?

Answer 1

Removing it after 2/3 of a second is easy: http://jsfiddle.net/TrueBlueAussie/hfof316a/3/

$('body').on('click', '.create-list', function () {
    var $element = $('<a href="#" class="list-group-item temp" data-toggle="modal" data-target="#listPopup"> Created List <span class="glyphicon glyphicon-remove-circle pull-right remove"></span> </a>');
    $('.add').before($element);
    setTimeout(function(){
        $element.removeClass("temp");
    }, 666);
});

You also need to set your transition on the item (not with the temp):

http://jsfiddle.net/TrueBlueAussie/hfof316a/6/