javascriptjquery

Achieving a cursor trail-like effect with jQuery


I want to animate an absolute-positioned image with right:xxxPX, let's say. Wen the animation is in progress, can I add a "trail" effect to it, like a Windows cursor trail effect.

Can I achieve this trail effect in jQuery?


Solution

  • This should work:

    var box = $('#box'),
        // Create some clones (these make up the trail)
        clones = $.map(Array(10), function(item, i){
            return box.clone().css('opacity', 1 / (i + 1)).hide().insertAfter(box);
        });
    
    box.animate({
        top: 100,
        left: 200
    }, {
        duration: 1000,
        step: function(now, fx) {
    
            // On each step, set a timeout for each clone,
            // making it move to the required position.
    
            var prop = fx.prop;
    
            $.each(clones, function(i, clone){
                clone = $(clone).show();
                setTimeout(function(){
                    clone.css(prop, now);
                }, 50 * i);
            });
    
        }
    });
    

    Demo: http://jsbin.com/ifobe3