jQuery to shift object

Question

I was trying to create an animation where it loads when the page loads.

Initially it creates object with white background.

Every 1 second, it shifts the object to right by 10px, at mean while change the object color by adding 10 to its RGB value.

I've create this jsFiddle, but it doesn't work (border is to distinguish the object) Any inputs will be largely appreciated.

    function RGB2HTML(red, green, blue)
    {
            var decColor =0x1000000* blue + 0x100 * green + 0x10000 *red ;
            return '#'+decColor.toString(16).substr(1);
    }


    window.onload = function(){   
           var currentColor='white';
           var red = 0;
           var green = 0;
           var blue =0;
           setInterval(function(){
               $('.object').style.top += 10px;
               $('.object').style.left += 10px;
               $('.object').style.background-color = RGB2HTML(red+10; green+10; blue+10)
           }, 1000);
    };

Here is the jsfiddle:

http://jsfiddle.net/jykG8/70/

in `var decColor...`, do you mean to add `blue` or multiply by it? — Dan Pichelman, Nov 01 '13 at 17:40
that's a function i found in this page http://stackoverflow.com/questions/2173229/how-do-i-write-a-rgb-color-value-in-javascript i guess it should be multiply. just edited code — BigGirl1017, Nov 01 '13 at 17:42

Stuart Kershaw · Accepted Answer · 2013-11-01T18:33:42.260

Here you go: http://jsfiddle.net/jykG8/77/

We can set variables for the initial top and left values, so that we may pass them into jQuery's .css() and increment from there. The same principal applies with the color transformation.

window.onload = function(){   
    var currentColor='white';
    var red = 0;
    var green = 0;
    var blue = 0;
    var top = 0;
    var left = 0;
    setInterval(function(){
        $('.object').css('top', top += 10);
        $('.object').css('left', left += 10);
        $('.object').css('background-color', 'rgb('+(red+=10)+','+(green+=10)+','+(blue+=10)+')');
        }, 1000);
};

Further, since we're dealing with one selector, we can combine the CSS properties into one call:

$('.object').css({
    'top' : top += 10,
    'left' : left += 10,
    'background-color' : 'rgb('+(red+=10)+','+(green+=10)+','+(blue+=10)+')'
});

Example: http://jsfiddle.net/jykG8/80/

Thanks! this works beautifully! for this line 'rgb('+(red+=10)+','+(green+=10)+','+(blue+=10)+')' these two plus signs outside of () are for syntax purpose, right? — BigGirl1017, Nov 01 '13 at 18:06
@BigGirl1017 Yeah, we have to close and reopen the quotes to concatenate the dynamic values with the the static CSS syntax. — Stuart Kershaw, Nov 01 '13 at 18:12

Barbara Laird · Answer 2 · 2013-11-01T18:17:52.977

0

http://jsfiddle.net/vdU9X/

function RGB2HTML(red, green, blue)
{
    var decColor = blue + 256 * green + 65536 * red;
    return '#' + decColor.toString(16);
}


window.onload = function(){   
    var currentColor='white';
    var red = 255;
    var green = 255;
    var blue =255;
    var left = 0;
    var top = 0;
    setInterval(function(){
        top += 10;
        left += 10;
        red -= 10;
        green -= 10;
        blue -= 10;
        $('.object').css ({
            'top' : top,
            'left' : left,
            'background-color': RGB2HTML(red, green, blue)
        });
    }, 1000);
};

I'm not 100% sure about the RGB2HTML function. I may have the blue & red reversed. But, if you want to go from white to black you need to start at 256 and go down. There should be some logic added to account for negative being invalid.

edited Nov 01 '13 at 18:17

answered Nov 01 '13 at 17:54

Barbara Laird

12,599
2
44
57

thanks! this solution works! i think you got the function right, blue is the last bit of RGB so I would assume it needs no multiples. I just posted the function I had into your solution and result's not right. I will update it now. – BigGirl1017 Nov 01 '13 at 18:12
a small point, but you should set red,green,blue to 255 (FF in hex) initially not 256 – geedubb Nov 01 '13 at 18:15

geedubb · Answer 3 · 2013-11-01T18:08:40.273

Try this:

window.onload = function(){   
    var red = 0;
    var green = 0;
    var blue =0;
    setInterval(function(){
        var t = parseInt($('.object').css('top')) + 10;
        var l = parseInt($('.object').css('left')) + 10;
        red += 10;
        green += 10;
        blue += 10;
        $('.object').css({top: t}).css({left: l}).css({'background-color': '#' + red.toString(16) + green.toString(16) + blue.toString(16)});
    }, 1000);
};

http://jsfiddle.net/jykG8/79/

jQuery to shift object

3 Answers3