将JQuery .css放入条件语句

Question

Ok, so I've made a timer that makes parts of my SVG map fadeOut as they cross certain thresholds. However, I want to mess with other parts of the CSS.

I looked at this post, but couldn't make sense of it in terms of my problem.

** Edits Below**

Thanks for the help, I took a look at my code and tried to clean out some of the stuff that didn't need to be there. I also restructured my if statement, putting it inside of the JQuery code. I tried the suggestion below, assigning the var timer outside the interval function, but then my start button no longer worked and the script started running on page load. So, I moved it back to keep things working. Also, put my code into JSFiddle, but I couldn't get it to work correctly. Will spend some more time familiarizing myself with that in the meantime. Thank you for introducing me to that.

As for my original question: the .animate() tag works so long as I set it to change the opacity attribute, but has no effect on the other attributes I want to change. I know SVG and CSS have different attribute names, and I've tried both types of names. Here is my code below. I am trying to get the .animate() effect to change the fill color and stroke-width.

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

I'm really just concerned with the JQuery statement, which works perfectly fine until I replace opacity with a different CSS attribute.

Thanks again for the attention and advice.

Answer 1

1) if you divide any number by 1 you get the original number, your divisions are doing nothing as far as i can tell.

2) setInterval should be written:

timer = setInterval(increment, ( 1000 / divide ))

also note increment() and start() are not good name choices to have in global scope, how many people will think of those names, use anonymous functions maybe to contain scope

(function()
{
  // function is now contained within anonymous function scope and not accessible outside
  function increment(){} 
})()

3) logically step though your code in your head. your code wont work

4) create a fiddle of what you have done so far