鞏固高飛jQuery代碼

大家在計算器土地，鞏固高飛jQuery代碼

前陣子我做了我的一個朋友的網站，我做了這個奇怪的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;}

來源

2010-11-23 blackbull77

它是隻是每個按鈕更改塊數或有其他參數，每個不同？ – Timbo 2010-11-23 14:29:10

有彼此不同。 – blackbull77 2010-11-26 19:57:02

由於您使用的類，有一些冗餘。我認爲這是鞏固它：

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

來源

2010-11-23 14:26:10 rosscj2533

鞏固高飛jQuery代碼

回答

相關問題