精简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>

（如果你还需要用于CSS的transitionN类，你当然可以同时使用这两种方法。）

然后使用以下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);
 });