Search the Community
Showing results for tags 'rollover buttons'.
Found 1 result
-
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
