精簡JQuery

Question

我只是想知道是否有任何簡化我的JQuery代碼呢？這是我目前所擁有的：

$(document).ready(function() { 
    $(window).bind("unload", function() {}); 

    $("#bg a").click(function (event) { 
     event.preventDefault(); 
    }); 

    $("a.transition2").hover(function (event) { 
     event.preventDefault(); 
     $(".background2").stop(true, false).animate({ 
      opacity: "1" 
     }, 1000); 
    }, 

    function() { 
     $(".background2").stop(true, false).delay(500).animate({ 
      opacity: "0" 
     }, 1500); 
    }); 
    $("a.transition3").hover(function (event) { 
     event.preventDefault(); 
     $(".background3").stop(true, false).animate({ 
      opacity: "1" 
     }, 1000); 
    }, 

    function() { 
     $(".background3").stop(true, false).delay(500).animate({ 
      opacity: "0" 
     }, 1500); 
    }); 
    $("a.transition4").hover(function (event) { 
     event.preventDefault(); 
     $(".background4").stop(true, false).animate({ 
      opacity: "1" 
     }, 1000); 
    }, 

    function() { 
     $(".background4").stop(true, false).delay(500).animate({ 
      opacity: "0" 
     }, 1500); 
    }); 
    $("a.transition5").hover(function (event) { 
     event.preventDefault(); 
     $(".background5").stop(true, false).animate({ 
      opacity: "1" 
     }, 1000); 
    }, 

    function() { 
     $(".background5").stop(true, false).delay(500).animate({ 
      opacity: "0" 
     }, 1500); 
    }); 
    $("a.transition6").hover(function (event) { 
     event.preventDefault(); 
     $(".background6").stop(true, false).animate({ 
      opacity: "1" 
     }, 1500); 
    }, 

    function() { 
     $(".background6").stop(true, false).delay(500).animate({ 
      opacity: "0" 
     }, 1000); 
    }); 
    $("a.transition7").hover(function (event) { 
     event.preventDefault(); 
     $(".background7").stop(true, false).animate({ 
      opacity: "1" 
     }, 1000); 
    }, 

    function() { 
     $(".background7").stop(true, false).delay(500).animate({ 
      opacity: "0" 
     }, 1500); 
    }); 
    $("a.transition8").hover(function (event) { 
     event.preventDefault(); 
     $(".background8").stop(true, false).animate({ 
      opacity: "1" 
     }, 1000); 
    }, 

    function() { 
     $(".background8").stop(true, false).delay(500).animate({ 
      opacity: "0" 
     }, 1500); 
    }); 

    $("a.transition2").click(function (event) { 
     event.preventDefault(); 
     $("#border").animate({ 
      right: "-50px" 
     }, 500); 
     $("#border").animate({ 
      left: "300px" 
     }, 500); 
     $("#border").animate({ 
      width: "30px" 
     }, 500); 
     $("#social").animate({ 
      right: "-50px" 
     }, 500); 
     $("#social").animate({ 
      left: "20px" 
     }, 500); 
     $("#menu").animate({ 
      right: "-200px" 
     }, 500); 
     $("#menu").animate({ 
      left: "50px" 
     }, 500); 
    }); 


    $("a.transition8").click(function (event) { 
     event.preventDefault(); 
     $("#contact").animate({ 
      opacity: "1" 
     }); 
    }); 
    $("#contact").click(function (event) { 
     event.preventDefault(); 
     $("#contact").animate({ 
      opacity: "0" 
     }); 
    }); 

}); 

這是過渡徘徊，這將是非常好的放入一個代碼位？

這裏的標記：

<div id="bg"> 
<img src="photos/backgrounds/home.jpg" class="background1" alt=""/> 
<ul> 
    <li><a href=""><img src="photos/backgrounds/about.jpg" class="background2" alt=""/></a></li> 
    <li><a href=""><img src="photos/backgrounds/3D.jpg" class="background3" alt=""/></a></li> 
    <li><a href=""><img src="photos/backgrounds/photo.jpg" class="background4" alt=""/></a></li> 
    <li><a href=""><img src="photos/backgrounds/video.jpg" class="background5" alt=""/></a></li> 
    <li><a href=""><img src="photos/backgrounds/graphics.jpg" class="background6" alt=""/></a></li> 
    <li><a href=""><img src="photos/backgrounds/web.jpg" class="background7" alt=""/></a></li> 
    <li><a href=""><img src="photos/backgrounds/contact.jpg" class="background8" alt=""/></a></li> 
</ul> 
</div> 

<div id="menu"> 
    <ul> 
     <li><a href="" class="transition2">aboutme</a></li> 
     <li><a href="" class="transition3">3Dmodelling</a></li> 
     <li><a href="" class="transition4">photography</a></li> 
     <li><a href="" class="transition5">videocreation</a></li> 
     <li><a href="" class="transition6">graphics</a></li> 
     <li><a href="" class="transition7">webdesign</a></li> 
     <li><a href="" class="transition8">contact</a></li> 
    </ul> 
</div> 

希望有人也許能幫助我們嗎？多謝你們。

Answer 1

因爲元素的順序似乎匹配，你可以找到通過索引相應的背景元素：

var $backgrounds = $('#bg li img'); 
var $menu_items = $('#menu li a'); 

$menu_items.hover(function(event){ 
    event.preventDefault(); 
    var $bg = $backgrounds.eq($menu_items.index(this)); 
    $bg.stop(true, false).animate({opacity:"1"},1000); 
}, function() { 
    var $bg = $backgrounds.eq($menu_items.index(this)); 
    $bg.stop(true, false).delay(500).animate({opacity:"0"},1500); 
}); 

參考：.eq，.index

你也使用.each並得到對應的元素一次，並通過.data存儲對它的引用，以便您不必每次都查看它。

Answer 2

更改鏈接元素是這樣的：

<li><a href="" class="transition" data-sequence="2">aboutme</a></li> 

（如果你還需要transitionN類CSS的目的，當然你也可以兼得）。

然後使用以下的jQuery：

$("a.transition").hover(function(event) { 
    event.preventDefault(); 
    var $bg = $(".background"+$(this).data("sequence")); 
    $bg.stop(true, false).animate({opacity:"1"},1000); 
}, function() { 
    var $bg = $(".background"+$(this).data("sequence")); 
    $bg.stop(true, false).delay(500).animate({opacity:"0"},1500); 
});