Result
http://jsfiddle.net/kachibito/vwvAd/27/embedded/result,js,css,html
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>