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而不是“slow”时，跳过fadeIn的前60％左右，并且该部分显示为60％不透明度，然后在剩下的时间内淡出。不知道我在做什么，所以提前谢谢你。

Answer 1

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

因此，不要尝试解决从不同来源中挑选出的那些代码，因为您希望显示的内容是内联代码，您不妨考虑使用Thickbox或{{3相反。

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

<强> 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（）函数时很突出。

希望这会有所帮助。 =）

jquery fade在表演搞笑？

1 个答案: