jquery - Can you animate a gradient on hover? -
Trying to find out if you can resurrect a gradient on UL Light A: Hover ??
I have the jQuery color animation plug installed and deployed, but I can not understand what I am doing:
JS:
& lt; Script language = "javascript" type = "text / javascript" & gt; $ (Document) .ready (function () {var iAniSpeed = 2000; var sBgColor = 'gold'; $ ('# headerwrap'). Hover (function () {$ ('li a: hover'). Animate ({Background color: sBgColor}, iAniSpeed); return false;});}); & Lt; / Script & gt; html:
& lt; Header & gt; & Lt; Div id = "headerwrap" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Academy Information & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Transit video & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; About the Alliance & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; BJJ blog & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Contact America & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Header & gt; CSS:
#headerwrap {width: 960px; Margin: 0 auto; } #headerWrap ul {background: url (../ images / separator.png) 0 0 repeat any; Height: 50px; Margin: 0; Padding: 0; List-style-type: none; } #headerWalLe {height: 50px; Swim left; Background: URL (../images/partner page) top not right-repeat; } #headerWrap ul li a {color: #fff; Text-decoration: none; Padding: 15px 20px 0 20px; Display area; Height: 35px; font-weight: bold; } #HedWrap UL Lee A: Hover {Color: # 022742; Text-decoration: None; Font-family: arial, non-serif; font-weight: bold; Cursor: indicator; Profile: None; Text-shadow: 0 1 px 1 px rgba (0,0,0, .3); Background: # caca5a not center down, repeat; Background: url (../img/pagination.png) Bottom center no-repeat, -WebKit-gradient (linear, left top, left bottom, (# caca5a), (# 909501)); Background: URL (../img/pagination.png) Do not center down-repeat, -Mo-linear-shield (top, # caca5a, # 909501); Filter: Presumed: DxImage Transforms. Microsoft.Greatant (StartColorStart = '# SICA 5A', & Collateral = '# 909501'); }
& lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {var iAniSpeed = 2000, sBgColor = 'gold'; $ ('# headerWrap li a'). Hover (function {$ (this) .mate ({backgroundColor: SBgColor}, IAniSpeed);});}); & Lt; / Script & gt;
Comments
Post a Comment