Помещение JQuery .css в условный оператор

Итак, я сделал таймер, который делает части моей SVG-карты fadeOut, когда они пересекают определенные пороговые значения. Тем не менее, я хочу общаться с другими частями CSS.

Я посмотрел на этот пост, но не мог понять это с точки зрения моей проблемы.

** Редактирование Ниже **

Спасибо за помощь, я взглянул на свой код и попытался очистить некоторые вещи, которые не обязательно должны были быть там. Я также изменил инструкцию if, поставив ее внутри кода JQuery. Я попробовал это предложение ниже, назначив таймер var за пределами функции интервалов, но тогда моя стартовая кнопка больше не работала, и скрипт начал работать при загрузке страницы. Итак, я вернул его, чтобы все работало. Кроме того, поместите мой код в JSFiddle, но я не смог заставить его работать правильно. Проведем еще некоторое время, знакомясь с этим тем временем. Спасибо, что ознакомили меня с этим.

Что касается моего исходного вопроса: тег.animate() работает до тех пор, пока я установил его для изменения атрибута непрозрачности, но не влияет на другие атрибуты, которые я хочу изменить. Я знаю, что SVG и CSS имеют разные имена атрибутов, и я пробовал оба типа имен. Вот мой код ниже. Я пытаюсь получить эффект.animate(), чтобы изменить цвет заливки и ширину штриха.

var i,timer;
i = 2013;

function start() {
timer = self.setInterval("increment()", 800 )
}

function increment() {
i++;
document.getElementById("timer_out").innerHTML =  i ;
$(document).ready( function() {
    if (i == 2014) {
        $('#AL').animate( {
            opacity: 0.3 } , 500 );
    }
});
}

function stop() {
clearInterval(timer);
timer = null;
 }

function reset() {
stop();
i=2013;
document.getElementById("timer_out").innerHTML = i;
}

Меня действительно интересует оператор JQuery, который отлично работает, пока я не заменил непрозрачность другим атрибутом CSS.

Еще раз спасибо за внимание и совет.