Question

Hellooverflow中的每个人都好了，

前段时间我为我的一个朋友做了一个网站，我为他的网站首页做了这个奇怪的jquery代码。简短的故事是他首先想要淡出并淡出面板，顶部导航分开，顶部导航突出显示，面板淡入淡出。我几乎没有时间更改HTML和图形，所以我别无选择，只能在每个按钮的jquery中进行。所以我的问题是......有没有办法可以整合这段代码，如果我有7个或更多按钮？

感谢您的帮助。代码位于底部。

$(".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;}

Answer 1

由于您正在使用课程，因此存在一些冗余。我认为这巩固了它：

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

整合愚蠢的jquery代码

1 个答案: