One Page fadeIn & fadeOut Transition Logic

问题

I am making a one-page website for a client. There are 3 different menu groups, but in this example i simplified it to one menu and less content.

I have this navigation:

    <nav>
        <ul id="main" class="toggle">
            <li><a id="design" href="#">DESIGN</a></li>
            <li><a id="contactus" href="#">CONTACT US</a></li>
            <li><a id="aboutus" href="#">ABOUT US</a></li>
            <li><a id="news" href="#">NEWS</a></li>
        </ul>
    </nav>

And Divs like that below:

<div class="designcontent">
Design Content Here
</div>
<div class="aboutuscontent">
About us Content Here      
</div>

So if i were to click on DESIGN it would show designcontent, and then if i were to click ABOUT US it would show aboutuscontent and so on.

I am asking for a short-hand code of

        $("#design").click(function(){
        $('.homecontent').fadeOut(500);
        $('.designcontent').delay(500).fadeIn(1000);
        return false;
        });

        $("#home").click(function(){
        $('.designcontent').fadeOut(500);
        $('.homecontent').delay(500).fadeIn(1000);
        return false;
        });

Because it gets more and more complicated if there are many pages, and if my client wants to add a new page.

I have this jQuery code below to get id's and use them in Array and hide the contents on load:

$('#main li a').each(function(){
  liIds.push('.'+ $(this).attr('id')+'content');
  $(''+liIds).hide();   
})

What i am missing is, clicking on menu links and showing the correct content each time a menu is clicked.

I hope my question is clear enough, if not i can provide visual examples on jsFiddle.

Thanks for taking time to read my question

My problem is solved using:

$("a").click(function(){
    var cls = $(this).attr('id')
     $('.' + cls + 'content').addClass('onpage');
    $('.onpage').fadeOut(500);
    $('.' + cls + 'content').delay(500).fadeIn(1000);
    return false;
})

回答1:

you can use similar name for id of the anchor and it's target element's class:

html:

<li><a id="design" href="#">DESIGN</a></li> 

<div class="design content">
   Design Content Here
</div>

js:

$("ul li a").click(function(){
    var cls = $(this).attr('id')
    $(".content").fadeOut(500);
    $('.' + cls).delay(500).fadeIn(1000);
    return false;
})

DEMO

来源：https://stackoverflow.com/questions/11373619/one-page-fadein-fadeout-transition-logic

标签

jquery

arrays

logic