javascript - jQuery 移动对象

Question

我试图在页面加载时加载动画。

最初它创建具有白色背景的对象。

每 1 秒，它会将对象向右移动 10px，同时通过将对象的 RGB 值加 10 来更改对象颜色。

我创建了这个jsFiddle，但是没有用(border是为了区分对象)任何意见将不胜感激。

    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);
    };

这是 jsfiddle:

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

Answer 1

给你:http://jsfiddle.net/jykG8/77/

我们可以为初始的 top 和 left 值设置变量，这样我们就可以将它们传递给 jQuery 的 .css() 并递增从那里。相同的原则适用于颜色转换。

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);
};

此外，由于我们处理的是一个选择器，我们可以将 CSS 属性组合到一个调用中:

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

示例:http://jsfiddle.net/jykG8/80/