(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); message.delay(options.time).fadeOut('normal', function() { $(this).remove(); }); }); }; })(jQuery); $('.add-item').click(function() { $('#status-area').flash_message({ text: 'カートに入れました!', how: 'append' }); });
#status-area .flash_message { padding: 5px; color: green; font-weight:bold; }
<button class="add-item">この商品をカートに入れておく</button> <div id="status-area"></div>