0

鼠标移动时颜色变化太频繁，但是我希望它延迟并使其平滑，但代码无法正常工作。

我delay()为此进行了介绍，但似乎不起作用。

让我知道我concept在代码中使用延迟时缺少什么。

jQuery代码-

var possible = 'ABCDEF123456';
var stringLength = 6;
$('#divcol').on('mousemove',function(){
    var randomString = Array.apply(null, new Array(stringLength)).map(function () {
    return possible[Math.floor(Math.random() * possible.length)];
}).join('');
    var col = "#"+randomString;
    $(this).delay(10000).css("background-color",col);
    })

HTML -

<div id="divcol" style="width:150px;height:150px;background-color:#c3c3c3;">
</div>

小提琴 - http://jsfiddle.net/83mN7/

我正在努力实现这样的目标 - http://www.aino.com/

4

3 回答 3

3

您可以使用jQuery animation来实现此目的：

$(this).animate({ backgroundColor: col }, 1500);
于 2013-08-22T13:23:04.027 回答
1

不是最好的解决方案，但它有效：

http://jsfiddle.net/83mN7/20/

var possible = 'ABCDEF123456';
var stringLength = 6;
var count = 0;
$('#divcol').on('mousemove', function () {
    var randomString = Array.apply(null, new Array(stringLength)).map(function () {
        return possible[Math.floor(Math.random() * possible.length)];
    }).join('');
    var col = "#" + randomString;
    count = count + 1;
    if (count > 30) {
        $(this).css("background-color", col);
        count = 0;
    }

});
于 2013-08-22T13:30:43.467 回答
1

您是否尝试过 css3 转换来完成此操作？您可以查看这些css 技巧。但是，对于不支持 css3 效果（如 Internet Explorer 9）的旧浏览器，这确实需要 jQuery 后备，但Modernizr可以帮助您实现这一点：

if (!Modernizr.csstransitions) {
    $(".test").hover(function () {
        $(this).stop().animate({ backgroundColor: "#ff0000" }, 1500)
    }, function() {
        $(this).stop().animate({ backgroundColor: "#0000ff" }, 1500)
    });
}

css3 过渡的另一个优点是它们是浏览器原生的，这意味着这些动画可以由 GPU 加速，从而产生更平滑的动画。

于 2013-08-22T13:44:39.810 回答