javascript - jquery fadeIn 搞笑？

Question

这就是我现在正在做的事情

http://www.dsi-usa.com/yazaki_port/hair-by-steph/

正如您在单击选项卡时看到的那样，淡入和淡出看起来非常有趣。我想知道是否有人可以看一下代码并告诉我我做错了什么。我是 Jquery 和 Javascript 的新手(就像昨天的新手一样)，所以如果代码困惑，我深表歉意。我想知道 1. 是否有一种更简单的方法来编写此内容，以及 2. 是否有一种方法可以让各个部分相互淡入淡出/任何其他任何人都有的很酷的想法。

html结构(为了篇幅把所有内容都拉出来了)

    <div id="main">
    <div id="display_canvas">
    </div>
    <div id="nav">
        <ul>
            <li><a class="btn" title="contact">CONTACT</a></li>
            <li><a class="btn" title="resume">RESUME</a></li>
            <li><a class="btn" title="portfolio">PORTFOLIO</a></li>
            <div class="clear"></div>
        </ul>
    <div class="clear"></div>
    </div>
        <div id="resume">
        //contents here
    </div>
    <div id="contact">
        //contents here
    </div>
</div>

CSS

*
{ 
    margin:0;   
    padding:0;
    font-family:verdana, helvetica, sans-serif;
}

#main
{
    width:1200px;
    margin:0 auto;
}

#display_canvas
{ 
    height:700px;
    background-color:#fefea8;
    box-shadow:5px 5px 5px #888888;
    -moz-box-shadow:5px 5px 5px #888888;
    -webkit-box-shadow:5px 5px 5px #888888;
    display:none;
}

.clear
{  
    clear:both;
}

#resume
{   
    clear:both;
    float:right;
    width:100%;
    background-color:#000000;
    background-image:url("../imgs/resume_back.png");
    background-position:300px 0px;
    background-repeat:no-repeat;
    height:200px;
    text-align:left;
    display:none;
}

#contact
{ 
    clear:both;
    float:right;
    width:100%;
    background-color:#000000;
    background-image:url("../imgs/contact_back.png");
    background-position:left;
    background-repeat:no-repeat;
    height:200px;
    text-align:left;
    display:none;
}

#nav
{     
    margin:1em 0 0 0;
    text-align:right;   
}

#nav ul
{
    list-style-type:none;
}

#nav li
{
    display:inline;
}

.btn
{    
    margin-right:20px;
    display:block;
    text-align:center;
    float:right;
    color:#000000;
    font-size:15px;
    font-weight:bold;
    line-height:30px;
    text-decoration:none;
    cursor:pointer;
    width:150px;
    height:30px;
}

.over
{
    background-color:#888888;
    color:#ffffff;
}

.active_contact
{
    background-color:#000000;
    color:#00a8ff;
}

.active_resume
{
    background-color:#000000;
    color:#9848c2;
}

.active_portfolio
{
    background-color:#000000;
    color:#ffffff;
}

最后是一大堆javascript

$(document).ready(function(){
//handles general navigation
$(".btn").hover(
    function(){
        $(this).addClass("over");
    },
    function(){
        $(this).removeClass("over");
    }
)

$(".btn").click(function(){
    var btn = $(this);
    var newClass = "active_" + btn.attr("title"); //set the new class
    var section = $("#" + btn.attr("title"));

    if ($("#curSection").length)
    {
        alert('there is a section');
        var curClass = "active_" + $("#curSection").attr("title"); //get the current class active_section name
        var curSection = "active"
        $("#curSection").removeClass(curClass).removeAttr("id"); //remove the current class and current section attributes

        btn.addClass(newClass).attr("id", "curSection"); //designate new selection

        $(".currentSection").fadeOut("slow", function(){ //fade out old section
            $(".currentSection").removeClass("currentSection");
            section.fadeIn("slow", function(){ //fade in new section
                alert('faded in');
                section.addClass("currentSection"); //designate new section
            });
        });

    }
    else
    {
        alert('first time');
        btn.addClass(newClass).attr("id", "curSection"); //designate new selection
        section.fadeIn("slow", function(){
            alert('faded in');
            section.addClass("currentSection");
        });
    }       
});

//handles resume navigation
$(".res-btn").hover(
    function(){
        $(this).addClass("res-over")
    },
    function(){
        $(this).removeClass("res-over")
    }
)

$(".res-btn[title=experience]").click(function(){
    $("#scroller").stop().animate({top: "0px"}, 1000);
}); 

$(".res-btn[title=expertise]").click(function(){
    $("#scroller").stop().animate({top: "-180px"}, 1000);
}); 

$(".res-btn[title=affiliates]").click(function(){
    $("#scroller").stop().animate({top: "-360px"}, 1000);
}); 
});

如果有人对这不起作用的原因有任何想法，请告诉我。我想可能是加载内容有问题，但内容应该已经加载，因为它们已经在屏幕上了，只是没有显示。我很困惑，我看到了一些与我相似的帖子，所以我遵循了他们的一些想法。当我将 fadeIn() 设置为喜欢 5000 而不是“慢”时，fadeIn 的前 60% 左右被跳过，并且该部分以 60% 的不透明度出现，然后在其余部分淡出。不确定我在做什么，所以先谢谢你。

Answer 1

在我的脑海中，我认为问题可能是您正在启动一个警告对话框而不是 jquery Fancybox/Thickbox 类型的覆盖灯箱，它适应它打开或关闭动画的速度。无论如何，尽管直接转到您的链接，但我无法复制您面临的问题。

因此，与其尝试解析您从不同来源挑选的代码块，而且由于您希望显示的内容是内联内容，您不妨考虑使用 Thickbox或 Fancybox相反。

或者，如果您愿意，您也可以在不使用警报对话框的情况下编写自己的灯箱脚本。它可能看起来像这样:

HTML:

<!--wrapper-->
<div id="wrapper">

    <a href="#" class="toggle-1">Box 1</a></li>

    <a href="#" class="toggle-1">Box 2</a></li>

    <!--hidden-content-->
    <div class="box-1">

        This is box 1. <a href="#" class="close-1">close</a>

    </div>

    <div class="box-2">

        This is box 2. <a href="#" class="close-2">close</a>

    </div>

</div>
<!--wrapper-->

CSS:

#wrapper{
    background:#ffffff;
    width:100%;
    height:100%;
    padding:0;
}

.box-1, .box-2{
    display:none;
    width:300px;
    height:300px;
    position:fixed;
    z-index:3000;
    top:30%;
    left:30%;
    background:#aaaaaa;  
    color:#ffffff;
    opacity:0;
}

JQUERY:

$(document).ready(function(){    
    $(".toggle-1").click(function(){
        $(".box-1").show(900);
        $(".box-1").fadeTo(900,1);
    });

         $(".close-1").click(function(){
             $(".box-1").hide(900);
             $(".box-1").fadeTo(900,0);
         });

    $(".toggle-2").click(function(){
        $(".box-2").show(900);
        $(".box-2").fadeTo(900,1);
    });

         $(".close-2").click(function(){
             $(".box-2").hide(900);
             $(".box-2").fadeTo(900,0);
         });

});

好吧，当然，为了让内容很好地显示在屏幕中央，还有很多样式需要完成，但我将把它排除在外，因为这更多的是关于如何显示的问题控制叠加层出现的速度。

在任何情况下，如果您想更改它出现或关闭的速度，只需将“900”值更改为其他值 - 较小的数字意味着更快的动画速度，反之亦然。如果您注意到了，我同时应用了 .hide() 和 .fadeTo() 函数。这部分是因为我将尝试强制在单击关闭按钮后隐藏显示的 div。这将防止它堆叠在其他内容之上，从而禁用任何按钮、链接或功能。您也可以尝试使用它们的“900”值。例如当您按下关闭按钮时，您实际上可以使 .hide() 相对于 fadeTo() 执行得更慢，只需为前者分配 3000，为后者分配 700。这会给人一种错觉，即它只是在淡化，而不是在淡化和摆动，当您使用 .hide() 或 .show() 函数时，后者是突出的。

希望这对您有所帮助。 =)