Happy Programming

ソースは以下

(function($) {
    $.fn.afterimage = function(cnt, speed) {
        var step = 1 / cnt;
        return this.each(function(idx, elem) {
            var clones = [];
            for (var i = 0; i < cnt; i++) clones.push($(elem).clone().css('opacity', step * (i)));
            var moved = false;
            var stoped = true;
            var last = clones.length - 1;
            $(elem).mousedown(function(event) {
                event.preventDefault();
                event.stopPropagation();
                $(clones).each(function(idx, elm) {elm.appendTo($(elem).parent())});
                $(elem).parent().append($(elem));
                var dx = $(elem).position().left - event.pageX;
                var dy = $(elem).position().top - event.pageY;
                var timeId;
                $(document).mousemove(function(event) {
                    stoped = false;
                    moved = true;
                    if (timeId) clearInterval(timeId);
                    event.preventDefault();
                    event.stopPropagation();
                    $(elem).css({
                        left: (event.pageX + dx),
                        top: (event.pageY + dy)
                    });

                    timeId = setInterval(function() {
                        $(clones).each(function(idx, elm) {
                            var pointX;
                            var pointY;
                            if (idx == last) {
                                pointX = (parseFloat($(elem).css('left')) - parseFloat($(elm).css('left')));
                                pointY = (parseFloat($(elem).css('top')) - parseFloat($(elm).css('top')));
                            }
                            else {
                                pointX = (parseFloat(clones[idx + 1].css('left')) - parseFloat($(elm).css('left')));
                                pointY = (parseFloat(clones[idx + 1].css('top')) - parseFloat($(elm).css('top')));
                            }
                            var l = parseFloat($(elm).css('left')) + (pointX / speed);
                            var t = parseFloat($(elm).css('top')) + (pointY / speed);
                            var left = (pointX > 0) ? Math.ceil(l): Math.floor(l);
                            var top = (pointY > 0) ? Math.ceil(t): Math.floor(t);
                            $(elm).css({left: left, top: top});
                        });
                        if (Math.abs(parseFloat($(elem).css('left')) - parseFloat(clones[0].css('left'))) < 0.5 &&
                            Math.abs(parseFloat($(elem).css('top')) - parseFloat(clones[0].css('top'))) < 0.5) {
                            clearInterval(timeId);
                            moved = false;
                            if (stoped) $(clones).each(function(idx, elm) {$(elm).remove()});
                        }
                    },15);
                });
                $(document).mouseup(function(event) {
                    $(document).unbind('mousemove');
                    if (!moved) $(clones).each(function(idx, elm) {$(elm).remove()});
                    stoped = true;
                });
            });
        });
    };
})(jQuery);
$(function(event) {
    $('img.thumbnail').afterimage(10, 3);
});