Consolidating goofy jquery code
Hello everyone in stackoverflow land,
A while back I did a website for a friend of mine and I did this weird jquery code for the front page of his site. The short story is he first started out wanting a fade in and fade out with panels with the top navigation separate to having both top navigation highlighted and the panels to fade in and fade out. I had little time to change the HTML and graphics so I no choice, but to do it in jquery with each individual button. So my question is...... Is there a way I can consolidate this code so If I have 7 or more buttons?
Thanks for the help. The code is on the bottom.
$(".block1").css({ opacity: 0.5 });
$(".home").css({ backgroundPosition: '0px 0px' });
$(".home").hover(function(){
$(".home").css({backgroundPosition: '0px -33px'});
$(".block1").stop().animate({backgroundPosition: '0px -250px', opacity: 1}, "slow");
},
function() {
$(".home").css({backgroundPosition: '0px 0px'});
$(".block1").st开发者_运维百科op().animate({backgroundPosition: '0px -250px', opacity: 0.5}, "slow");
});
$(".block1").css({ opacity: 0.5 });
$(".home").css({ backgroundPosition: '0px 0px' });
$(".block1").hover(function(){
$(".home").css({backgroundPosition: '0px -33px'});
$(".block1").stop().animate({backgroundPosition: '0px -250px', opacity: 1}, "slow");
},
function() {
$(".home").css({backgroundPosition: '0px 0px'});
$(".block1").stop().animate({backgroundPosition: '0px -250px', opacity: 0.5}, "slow");
});
$(".home").click(function(){
$(window).unload( function () {
$(".block1").css({backgroundPosition: '0px -250px', opacity: 0.5});
$(".home").css({backgroundPosition: '0px 0px'});
});
});
$(".block1").click(function(){
$(window).unload( function () {
$(".home").css({backgroundPosition: '0px 0px'});
$(".block1").css({backgroundPosition: '0px -250px', opacity: 0.5});
});
});
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Artisserie Bakery</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="js/jquery.backgroundPosition.js" type="text/javascript"></script>
<script src="js/hover-navs.js" type="text/javascript"></script>
<script src="js/preloadCssImages.jQuery_v5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".art_content-wrapper").fadeIn("slow");
$(".art_content ul li a").preloadCssImages();
});
</script>
</head>
<body>
<div id="art_wrap">
<div class="art_header">
<a href="index.html"><h1 id="art_logo">Artisserie Bakery</h1></a>
</div>
<div class="art_nav-wrapper">
<div class="art_nav">
<ul>
<li><a class="home" href="home.html">Home</a></li>
<li><a class="chefs" href="#">Chefs</a></li>
<li><a class="products" href="products.html">Products</a></li>
<li><a class="shopping" href="#">Shopping</a></li>
<li><a class="events" href="#">Events</a></li>
<li><a class="contact" href="#">Contact</a></li>
<li><a class="friends" href="#">Friends</a></li>
</ul>
</div>
</div>
<div class="art_content-wrapper home-page">
<div class="art_content">
<ul>
<li><a class="block1" href="home.html">Home</a></li>
<li><a class="block2" href="#">Chefs</a></li>
<li><a class="block3" href="products.html">Products</a></li>
<li><a class="block4" href="#">Shopping</a></li>
<li><a class="block5" href="#">Events</a></li>
<li><a class="block6" href="#">Contact</a></li>
<li><a class="block7" href="#">Friends</a></li>
</ul>
<br />
<img src="graphx/sprite-footer.png" alt="" border="0" /></div>
</div>
</div>
</body>
</html>
CSS:
a.home{
width:88px;
height:33px;
text-align:center;
background:url(../graphx/sprite-navs.png) 0px 0px no-repeat;}
a:hover.home{
background:url(../graphx/sprite-navs.png) 0px -33px no-repeat;}
a.chefs{
width:87px;
height:33px;
text-align:center;
background:url(../graphx/sprite-navs.png) -88px 0px no-repeat;}
a:hover.chefs{
background:url(../graphx/sprite-navs.png) -88px -33px no-repeat;}
a.products{
width:90px;
height:33px;
text-align:center;
background:url(../graphx/sprite-navs.png) -175px 0px no-repeat;}
a:hover.products{
background:url(../graphx/sprite-navs.png) -175px -33px no-repeat;}
a.shopping{
width:89px;
height:33px;
text-align:center;
background:url(../graphx/sprite-navs.png) -265px 0px no-repeat;}
a:hover.shopping{
background:url(../graphx/sprite-navs.png) -265px -33px no-repeat;}
a.events{
width:88px;
height:33px;
text-align:center;
background:url(../graphx/sprite-navs.png) -354px 0px no-repeat;}
a:hover.events{
background:url(../graphx/sprite-navs.png) -354px -33px no-repeat;}
a.contact{
width:82px;
height:33px;
text-align:center;
background:url(../graphx/sprite-navs.png) -442px 0px no-repeat;}
a:hover.contact{
background:url(../graphx/sprite-navs.png) -442px -33px no-repeat;}
a.friends{
width:88px;
height:33px;
text-align:center;
background:url(../graphx/sprite-navs.png) -524px 0px no-repeat;}
a:hover.friends{
background:url(../graphx/sprite-navs.png) -524px -33px no-repeat;}
a.block1{
display:block;
text-indent:-9999px;
background:url(../graphx/sprite-pages.png) 0px -250px no-repeat;
height:250px;
width:88px;
opacity: 0.5;}
a:hover.block1{
background:url(../graphx/sprite-pages.png) 0px -250px no-repeat;}
a.block2{
display:block;
text-indent:-9999px;
background:url(../graphx/sprite-pages.png) -88px -250px no-repeat;
height:250px;
width:87px;
opacity: 0.5;}
a:hover.block2{
background:url(../graphx/sprite-pages.png) -88px -250px no-repeat;}
a.block3{
display:block;
text-indent:-9999px;
background:url(../graphx/sprite-pages.png) -175px -250px no-repeat;
height:250px;
width:90px;
opacity: 0.5;}
a:hover.block3{
background:url(../graphx/sprite-pages.png) -175px -250px no-repeat;}
a.block4{
display:block;
text-indent:-9999px;
background:url(../graphx/sprite-pages.png) -265px -250px no-repeat;
height:250px;
width:89px;
opacity: 0.5;}
a:hover.block4{
background:url(../graphx/sprite-pages.png) -265px -250px no-repeat;}
a.block5{
display:block;
text-indent:-9999px;
background:url(../graphx/sprite-pages.png) -354px -250px no-repeat;
height:250px;
width:88px;
opacity: 0.5;}
a:hover.block5{
background:url(../graphx/sprite-pages.png) -354px -250px no-repeat;}
a.block6{
display:block;
text-indent:-9999px;
background:url(../graphx/sprite-pages.png) -442px -250px no-repeat;
height:250px;
width:82px;
opacity: 0.5;}
a:hover.block6{
background:url(../graphx/sprite-pages.png) -442px -250px no-repeat;}
a.block7{
display:block;
text-indent:-9999px;
background:url(../graphx/sprite-pages.png) -524px -250px no-repeat;
height:250px;
width:88px;
opacity: 0.5;}
a:hover.block7{
background:url(../graphx/sprite-pages.png) -524px -250px no-repeat;}
Since you are using classes, there are some redundancies. I think this consolidates it:
var block1Classes = $(".block1");
var homeClasses = $(".home");
var block1HomeClasses = $(".home, .block1");
block1Classes.css({ opacity: 0.5 });
homeClasses.css({ backgroundPosition: '0px 0px' });
block1HomeClasses.hover(function(){
homeClasses.css({backgroundPosition: '0px -33px'});
block1Classes.stop().animate({backgroundPosition: '0px -250px', opacity: 1}, "slow");
},
function() {
homeClasses.css({backgroundPosition: '0px 0px'});
block1Classes.stop().animate({backgroundPosition: '0px -250px', opacity: 0.5}, "slow");
});
block1HomeClasses.click(function(){
$(window).unload( function () {
block1Classes.css({backgroundPosition: '0px -250px', opacity: 0.5});
homeClasses.css({backgroundPosition: '0px 0px'});
});
});
加载中,请稍侯......
精彩评论