ボタンをクリックした時に一瞬だけメッセージを表示する

Result

jQuery

(function($) {
    $.fn.flash_message = function(options) {
        //デフォルト値
        options = $.extend({
            text: 'Done',
            time: 750,
            how: 'before',
            class_name: ''
        }, options);

        return $(this).each(function() {
            //指定したセレクタを探して取得
            if ($(this).parent().find('.flash_message').get(0)) return;

            var message = $('<span />', {
                'class': 'flash_message ' + options.class_name,
                text: options.text
            //フェードイン表示
            }).hide().fadeIn('fast');

            $(this)[options.how](message);
            //delayさせてからフェードアウト
            message.delay(options.time).fadeOut('normal', function() {
                $(this).remove();
            });

        });
    };
})(jQuery);
//設定
$('.add-item').click(function() {
    $('#status-area').flash_message({
        text: 'カートに入れました！',
        how: 'append'
    });
});​

css

#status-area .flash_message {
    padding: 5px;
    color: green;
    font-weight:bold;
}​

html

<button class="add-item">この商品をカートに入れておく</button>

<div id="status-area"></div>​

via

jQuery_Flash_Messages