单页淡入和放大器;淡出转换逻辑 [英] One Page fadeIn & fadeOut Transition Logic

问题描述

我正在为一个客户一个单页的网站。有3种不同菜单组，但在本实施例中我将其简化为一个菜单和较少含量

我有这样的导航：

 ＆LT;＆导航GT;
        ＆LT; UL ID =主级=切换＆GT;
            ＆LT;立GT;＆LT;一个ID =设计的href =＃＆GT; DESIGN＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;立GT;＆LT;一个ID =联系我们的href =＃＆GT;联系我们＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;立GT;＆LT;一个ID =关于我们的href =＃＆gt;关于美国和LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;立GT;＆LT;一个ID =新闻的href =＃＆GT;新闻＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / NAV＆GT;
 

和Div​​时一样，如下：

 ＆LT; D​​IV CLASS =designcontent＆GT;
设计内容在这里
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =aboutuscontent＆GT;
关于我们的内容在这里
＆LT; / DIV＆GT;
 

所以，如果我是点击DESIGN它会显示designcontent，然后如果我是点击关于我们它会显示aboutuscontent等。

我要求的速记code

  $（＃设计）。点击（函数（）{
        $（'。homecontent'）淡出（500）。
        $（'。designcontent'）延迟（500）.fadeIn（1000）。
        返回false;
        }）;        $（＃家）。点击（函数（）{
        $（'。designcontent'）淡出（500）。
        $（'。homecontent'）延迟（500）.fadeIn（1000）。
        返回false;
        }）;
 

由于它变得越来越复杂，如果有很多页，如果我的客户要添加新页面。

我有这样的jQuery的code以下获得的ID，并在阵列中使用它们，隐藏加载的内容：

  $（'＃主礼了）。每个（函数（）{
  liIds.push（+ $（本）.attr（'身份证'）+'内容'。'）;
  $（''+ liIds）.hide（）;
}）
 

我所缺少的是，点击菜单链接并显示每被点击菜单的时间正确的内容。

我希望我的问题是不够清楚，如果不是我可以的jsfiddle提供可视化的例子。

感谢您抽出时间来阅读我的问题

我的问题是使用解决：

  $（A）。点击（函数（）{
    VAR CLS = $（本）.attr（ID）
     $（+ CLS +'内容'。'）addClass（'页当前'）。
    $（'。的onpage'）淡出（500）。
    $（'。'+ CLS +'内容'）延迟（500）.fadeIn（1000）;
    返回false;
}）
 

解决方案

您可以为 ID 锚的使用类似名称和它的目标元素的类：

HTML

 ＆LT;李＆GT;＆LT;一个ID =设计的href =＃＆GT; DESIGN＆LT; / A＆GT;＆LT; /李＆GT;＆LT; D​​IV CLASS =设计内容＆GT;
   设计内容在这里
＆LT; / DIV＆GT;
 

JS：

  $（UL利A）。点击（函数（）{
    VAR CLS = $（本）.attr（ID）
    $（内容），淡出（500）。
    $（'。'+ CLS）.delay（500）.fadeIn（1000）;
    返回false;
}）
 

演示

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;
})

解决方案

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

这篇关于单页淡入和放大器;淡出转换逻辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！