1

私は jQuery の初心者で、変数や関数の作成はあまり得意ではありませんが、コードを凝縮してより「エレガント」にしたいと考えています。

現在、私の jQuery コード全体は次のようになっています。

$(document).ready(
    $('div.pane').scrollTo( 0 ),
    $.scrollTo( 0 ),
    $.localScroll({ duration:400,})
    );

( scrollTo/localScroll は 2 つのプラグインです。)

var gom = function (){$('#content').children().animate( {opacity: 0.4}, 200); }
var visa = function () {animate({opacity: 1 }, 400);}

$('#ntop').click(function (){
    gom();
});

$('#nmind').click(function (){
    gom();
    $('#secmind').animate({opacity: 1 }, 400);
});

$('#nheart').click(function (){
    gom();
    $('#secheart').animate({opacity: 1 }, 400);
});

$('#nhands').click(function (){
    gom();
    $('#sechands').animate({opacity: 1 }, 400);
});

$('#nfeet').click(function (){
    gom();
    $('#secfeet').animate({opacity: 1 }, 400);
});

$('#foot').click(function (){
    gom();
});

$('#secmind').mouseenter( function(){
    if($('#secmind').css('opacity') < '1') {
    gom();
    $('#secmind').animate({opacity: 1 }, 400); } 
});

$('#secheart').mouseenter( function(){
    if($('#secheart').css('opacity') < '1') {
    gom();
    $('#secheart').animate({opacity: 1 }, 400); } 
});

$('#sechands').mouseenter( function(){
    if($('#sechands').css('opacity') < '1') {
    gom();
    $('#sechands').animate({opacity: 1 }, 400); } 
});

$('#secfeet').mouseenter( function(){
    if($('#secfeet').css('opacity') < '1') {
    gom();
    $('#secfeet').animate({opacity: 1 }, 400); } 
});

HTMLは次のとおりです。

         <div id="wrapper">
            <img src="b6.png" id="imgsimon" />
            <a name="sectop"></a>


        <div id="nav">
        <ul>
            <li id="ntop"> <a href="#sectop">Top</a> </li>
            <li id="nmind"> <a href="#secmind">Inspiration</a> </li>
            <li id="nheart"> <a href="#secheart">Interests</a> </li>
            <li id="nhands"> <a href="#sechands">Work</a> </li>
            <li id="nfeet"> <a href="#secfeet">Aspirations/Anticipations</a> </li>
            <li id="foot"> <a href="#secfooter">Contact Me!</a> </li>
        </ul>

    </div> 
    <div id="rubrik">
    <h1>Header 1</h1>
    <p>Hey!</p>
    </div>

    <div id="content">

        <div class="text" id="secmind"><a name="secmind"></a>
            <h2>Inspiration</h2>
            <p>Bla bla</p>
        </div>  

        <div class="text" id="secheart"><a name="secheart"></a>
            <h2>Interests</h2>
            <p>Bla bla bla bla bla</p>
        </div>  


        <div class="text" id="sechands"><a name="sechands"></a>
            <h2>Work</h2>
            <p>Bla bla bla bla</p>
        </div>  

        <div class="text" id="secfeet"><a name="secfeet"></a>
            <h2>Aspirations / Anticipations</h2>
            <p>Bla bla bla</p>
        </div>

    </div>
    <div id="footer"><a name="secfooter"></a>
            <h2>Contact me!</h2>
            <p>Bla bla</p>
            <p>Bla bla</p>
    </div>
</div>

「gom」機能は問題なく動作していますが、「visa」の何が問題なのかわかりません。また、if 関数をよりスムーズな方法で記述できると想定しているため、1 回だけ記述すればよく、個々の ID ごとに繰り返す必要はありません。

どんな助けでも大歓迎です.Webページはうまく機能しています.これをより良く、より速く、よりエレガントな方法で書く方法を知りたいだけです. どうもありがとう！

4

2 に答える 2

0

あなたのvisa関数には、アニメーション化する要素が選択されていません:

これ：

 var visa = function () {animate({opacity: 1 }, 400);}

次のようにする必要があります。

 var visa = function () { $('anElement').animate({opacity: 1 }, 400) }

また、各アンカー要素を個別に選択する代わりに、アンカー要素を選択することもできます:

$('ul li a').click(function(e){
    e.preventDefault(); // prevents default action of the anchor link
    gom();
    var id = $(this).attr('href').remove('#',''); 
    $('#' + id).animate({opacity: 1 }, 400);
});

$('#content div').mouseenter( function(){
    if($(this).css('opacity') < '1') {
    gom();
    $(this).animate({opacity: 1 }, 400); } 
});
于 2012-07-10T22:34:32.637 に答える
0

使用できます.each()

ドキュメンテーション

于 2012-07-10T22:32:00.873 に答える