1

我对 jQuery 还很陌生，不太擅长创建变量和函数，但我希望我的代码更简洁，更“优雅”。

目前，我的整个 jQuery 代码如下所示：

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

（scrollTo/localScroll 是两个插件。）

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 函数，因此您只需编写一次，而不必为每个单独的 id 重复它。

欢迎任何帮助，网页运行良好，我只想知道如何以更好、更快和更优雅的方式编写它。非常感谢！

4

2 回答 2

0

您可以使用.each()

文档

于 2012-07-10T22:32:00.873 回答
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 回答