Question

我无法使用jQuery UI或任何插件。我有一个父div包含不能受其影响的元素。所以我不能做一个简单的不透明度开关。

    <img class="badge_ico" rel="28" src="" />
    <div>I <3 Ford</div>
</div>

是否存在诸如setTimeout()之类的黑客或类似的东西，可以增加颜色以显示从深灰色到中灰色的动画？假设我使用RBG（0,0,0）值可以做一些事情。

内容的bg颜色是我想在悬停时增加的颜色。

Answer 1

您可以设置颜色数组，并使用setInterval()更改间隔的颜色：

var target_el = $('#target_element'),
    colors    = ['#999', '#666', '#333', '#ccc'],
    index     = 0,
    timer;

target_element.on('mouseenter', function () {
    timer = setInterval(function () {
        if (index in colors) {
            target_el.css({
                'background-color' : colors[index]
            });
            index++;
        } else {
            index = 0;
            clearInterval(timer);
        }
    }, 100);
});

这是一个展示工作解决方案的方法：http://jsfiddle.net/jasper/ZXCjL/2/

Answer 2

这是我对自动化方法的看法。可以更好地优化。：\预先警告它是一些有点垃圾的代码（我现在要写一篇社会研究论文：P）

Demo

HTML

<div id="box">This is a test</div>

CSS

#box
{
    color:white;
    background:#333;
    padding:20px;
    margin:20px;
    float:left;
    cursor:pointer;
}

的javascript

var box = document.getElementById("box");

box.onclick = function(){
    box.style.background = "#333";
    var current = Math.round(0.2 * 256);
    var step = 1;
    var ms = 10;
    var animation = setInterval(function(){
        current += step;
        var shade = (current).toString(16);
        box.style.backgroundColor = "#" + shade + shade + shade;
        if(parseInt(shade,16) > 0.7 * 256)
            clearInterval(animation);
    },ms);
}

Jquery .css（）黑客让它看起来像动画？

2 个答案:

Demo

HTML

CSS

的javascript