GSAP tween not working correctly. Set duration has no effect

Question

I am trying out the GSAP animation library. According to the basic docs the syntax for getting a tween up and running is:

TweenLite.to( [target object], [duration in seconds], [destination values] )

So I have tried a really simple tween based on jQuery's hover event:

$('.contact-item').hover(function(){
    TweenLite.to(this,4,{background:'#671B4B'});
},function(){
    TweenLite.to(this,4,{background:'#FFFFFF'});
});

Oddly, the background does change to the correct color, but it tweens instantly instead of over the course of 4 seconds as I have specified in the second argument.

I did check to make sure the duration is in seconds not milliseconds. It's in the docs I linked to. I also made sure that I am using TweenLite and not TweenMax. I am using jQuery but I do not see any conflicts or errors in the console. I have also made sure that the CSSPlugin is included in my fiddle below.

Any help is appreciated. here is the fiddle.

Answer 1

Changing background to backgroundColor should fix your problem. [Link].