Question

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

我为此引入了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/

Answer 1

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

$(this).animate({ backgroundColor: col }, 1500);

Answer 2

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

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

});

Answer 3

您是否尝试过css3过渡来完成此操作？你可以查看这些css tricks。但是，对于不支持css3效果的旧浏览器，这需要jQuery后备，例如Internet Explorer 9，但Modernizr可以帮助您实现这一目标：

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

css3过渡的另一个优点是它们是浏览器原生的，这意味着GPU可以加速这些动画，这样可以使动画更加流畅。

div的颜色变化太快了

3 个答案: