JavaScript -Изменить цвет CSS на 5 секунд - Как добавить эффект ослабления?

Question

При ссылке на этот вопрос: -

JavaScript -Изменение цвета CSS на 5 секунд

Рабочая демонстрация ответа: -

http://jsfiddle.net/maniator/dG2ks/

Мне нужно знать, как я могу добавить к нему эффект замедления, чтобы медленно и медленно цвет становился непрозрачным на 100% и аналогичным образом становился прозрачным на 100%.

Answer 1

Код

function makeRGBStr(obj) {
    if (obj.a == null) return "rgb(" + obj.r + "," + obj.g + "," + obj.b + ")";
    else return "rgba(" + obj.r + "," + obj.g + "," + obj.b + "," + obj.a + ")";
}


window["highlight"] = function(obj, color) {
    var highlightColor = color || {
        "r": 255,
        "g": 0,
        "b": 0
    };


    var orig = obj.style.backgroundColor;
    var curAlpha = 1;
    obj.style.backgroundColor = makeRGBStr(highlightColor);
    setTimeout(function() {
        curAlpha -= 0.1;
        var newColor = highlightColor;
        newColor.a = curAlpha;
        obj.style.backgroundColor = makeRGBStr(newColor);

        if (curAlpha <= 0) {
            obj.style.backgroundColor = orig;
        }
        else {

            setTimeout(arguments.callee, 100);
        }
    });
}

jsFiddle: http://jsfiddle.net/dG2ks/32/

Некоторые примеры

• Выделите, если присутствует конкретная переменная $ _GET: Код: http://jsfiddle.net/dG2ks/36/, увидеть его в действии: http://jsfiddle.net/dG2ks/36/show/?someVar=there

• выделить ячейку таблицы: http://jsfiddle.net/dG2ks/38/

• выделить все ячейки таблицы разными цветами: http://jsfiddle.net/dG2ks/40/

Answer 2

Вы можете добавить библиотеку jquery в сочетании с jquery ui - если вы ее еще не используете - и использовать метод switchClass.

Вся информация здесь: http://jqueryui.com/demos/switchClass/

Это займет всего 5 строк, чтобы сделать то, что вы хотите:

Поместите jquery en jquery ui в заголовочный раздел вашей страницы (2 строки кода). Это удаленно размещенные файлы, вы можете скопировать / вставить код «как есть».

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

А затем, в конце тела, поместите скрипт, который содержит эти три строки кода:

    $(".yourbutton".click(function() {
            switchClass('.currentclass','.redclass',500) 
            // transition from .currentclass to .redclass in 500 milliseconds
    });