javascript - 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 存储对它的引用，这样您就不必每次都查找它时间。