Skip to content

Instantly share code, notes, and snippets.

@lizardking8610
Created May 18, 2017 17:03
Show Gist options
  • Select an option

  • Save lizardking8610/c7315ecbd8f9a4fcdb64f8f74c57f471 to your computer and use it in GitHub Desktop.

Select an option

Save lizardking8610/c7315ecbd8f9a4fcdb64f8f74c57f471 to your computer and use it in GitHub Desktop.
jQuery: image fade on nav into another image
ul#menu li a{float:left;display:block;background:url("images/menu.png") no-repeat;width:150px;text-indent:-9999px;height:50px}
ul#menu li#home a{background-position:0px 0px}
ul#menu li#about a{background-position:-150px 0px}
ul#menu li#services a{background-position:-300px 0px}
ul#menu li#contact a{background-position:-450px 0px}
ul#menu li a span {background:url("images/menu.png");height:50px;display:block}
ul#menu li#home a span{background-position:0px -50px}
ul#menu li#about a span{background-position:-150px -50px}
ul#menu li#services a span{background-position:-300px -50px}
ul#menu li#contact a span{background-position:-450px -50px}
<ul id="menu">
<li id="home"><a href="#">home</a></li>
<li id="about"><a href="#">about</a></li>
<li id="services"><a href="#">services</a></li>
<li id="contact"><a href="#">contact</a></li>
</ul>
$(function() {
$("ul#menu li a").wrapInner("<span></span>");
$("ul#menu li a span").css({"opacity" : 0});
$("ul#menu li a").hover(function(){
$(this).children("span").animate({"opacity" : 1}, 400);
}, function(){
$(this).children("span").animate({"opacity" : 0}, 400);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment