Home/ Questions/Q 3401544
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T05:01:44+00:00

Hello everyone in stackoverflow land, A while back I did a website for a

  • 0

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").stop().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;}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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'});
    });
});
    • 0