JQuery Fade в действии смешно?

Question

это то, над чем я сейчас работаю

http://www.dsi -usa.com / yazaki_port / волос по-Стеф /

Как вы можете видеть, когда вы нажимаете на вкладки, постепенное исчезновение и исчезновение выглядят очень забавно. Мне интересно, может ли кто-нибудь взглянуть на код и сказать, что я делаю неправильно. Я чрезвычайно новичок в 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>

КСС

*
{ 
    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 вместо «медленного», первые 60% или около того значения fadeIn пропускаются, и секция появляется, скажем, с непрозрачностью 60%, а затем исчезает до конца. Не уверен, что я делаю, спасибо заранее.

Answer 1

Мне кажется, что проблема может заключаться в том, что вы запускаете диалоговое окно с предупреждением, а не оверлейный лайтбокс типа Fancybox / Thickbox jquery, который учитывает скорость, с которой он анимируется, чтобы открываться или закрываться.И в любом случае, я не могу воспроизвести проблему, с которой вы сталкиваетесь, несмотря на то, что я перехожу непосредственно к вашей ссылке.

Так что вместо того, чтобы пытаться разрешить этот фрагмент кода, который вы выбрали из разных источников и с момента публикациито, что вы хотите отобразить, является встроенным, вы могли бы также рассмотреть возможность использования 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 ().

Надеюсь, что это поможет кому-то как.=)