0

とにかく私の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"
        });
    });

});

1 ビットのコードに入れると本当にいいのはトランジション ホバーですか?

マークアップは次のとおりです。

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

うまくいけば、誰かが助けてくれるかもしれませんか？みんなありがとう。

4

2 に答える 2

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毎回参照する必要がないようにすることもできます。

于 2012-10-12T01:34:40.207 に答える
0

リンク要素を次のように変更します。

<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);
 });
于 2012-10-12T02:27:28.710 に答える