Hello. I have some code I'm having trouble with - I'd like to do animated rollovers however it is not working correctly. Can you please advise where I am going wrong? Thank you!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GreenSock: HTML5</title>
<!--css goes here -->
<style>
#container
{
width:924px;
height:250px;
background-color:#000000;
opacity:0;
position:relative;
}
#my_films
{
width:875px;
height:422px;
opacity:0;
margin-top:55px;
margin-left:20px;
}
#season2
{
width:285px;
height:44px;
margin-top:0px;
margin-left:19px;
}
#grantland
{
width:304px;
height:44px;
margin-top:5px;
margin-left:0px;
opacity:0;
}
#packshot
{
width:365px;;
height:265px;
position:absolute;
left:335px;
top:20px;
opacity:0;
}
#holiday
{
width:142px;
height:16px;
position:absolute;
left:722px;
top:84px;
opacity:0;
}
#starts
{
position:absolute;
left:714px;
top:104px;
opacity:0;
}
#buy
{
position:absolute;
left:747px;
top:210px;
opacity:0;
background-color:#000000;
background-image: url('images/buy_outline.png');
width:88px;
height:41px;
}
</style>
</head>
<body>
<div id="container">
<div><img src="images/my_films.svg" id="my_films" /></div>
<div id="season2"><img src="images/season2.png" /></div>
<div id="grantland"><img src="images/grantland.png"></div>
<div id="packshot"><img src="images/packshots_lrgest.png" /></div>
<div id="holiday"><img src="images/holiday.png" /></div>
<div id="starts"><img src="images/starts.png" /></div>
<div id="buy"><a href="#">Buy</a></div>
</div>
<!--CDN link for the latest TweenMax-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.2/TweenMax.min.js"></script>
<script>
window.onload = function(){
var tl = new TimelineMax({repeat:2, repeatDelay:3});
tl.add( TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}) );
tl.add( TweenLite.to(my_films, 1, {width:177, height:44, alpha:1, ease:Power1.easeIn}) );
tl.add( TweenLite.from(season2, 1.5, {alpha:0}) );
tl.add( TweenLite.to(grantland, .5, {x:19, alpha:1}) );
tl.add( TweenLite.to(packshot, 1.5, {alpha:1, ease:Power4.easeIn}) );
tl.add( TweenLite.to(holiday, 1, {alpha:1}) );
tl.add( TweenLite.to(starts, .75, {alpha:1}) );
tl.add( TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut}) );
}
$("#buy").hover(
function(){
TweenLite.to(this, 0.5, {scale:1.5, backgroundColor:"red"});
},
function(){
TweenLite.to(this, 0.5, {scale:1, backgroundColor:"black"});
}
);
</script>
</body>
</html>
Any ideas? (the buy text is in there as placeholder - I'd like to see the background changing like in this example: http://codepen.io/GreenSock/pen/deb6ac1e2c8ce73ac7d68efba088ed00