0

jquery関数のfadeIn（）およびfadeOut（）でサイドナビゲーションをクリックして、JSを使用してdivを表示/非表示にしています。私が遭遇する問題は、1 つの div がフェードアウトし、次の div が同時にフェードインすることです。また、既に表示されている div のリンクをクリックすると、フェードアウトして再びフェードインします。IF ステートメントが 2 つの修正を行うための最良のアプローチであるかどうかは
わかりません。
2. 現在表示されている div は、同じリンクをクリックしてもフェードアウト/インしません。

ここに私がこれまでに持っているものがあります(IFステートメントでの私の壊れた試みなしで):
http://jsfiddle.net/k55Cw/1/

HTML:

<div class="container">
    <header>
        <ul class="sidenav">
            <li><h2><a data-region="nav-1" href="#">About</a></h2></li>
            <li><h2><a data-region="nav-2" href="#">Services</a></h2></li>
            <li><h2><a data-region="nav-3" href="#">Team</a></h2></li>
            <li><h2><a data-region="nav-4" href="#">News</a></h2></li>
            <li><h2><a data-region="nav-5" href="#">Contact</a></h2></li>
        </ul>
    </header>
    <div id="nav-1" class="infozone"><p>Hello I'm box 1.</p></div>
    <div id="nav-2" class="infozone"><p>Hello I'm box 2.</p></div>
    <div id="nav-3" class="infozone"><p>Hello I'm box 3.</p></div>
    <div id="nav-4" class="infozone"><p>Hello I'm box 4.</p></div>
    <div id="nav-5" class="infozone"><p>Hello I'm box 5.</p></div>
</div>

CSS:

.infozone{
    float:left;
    height:400px;
    width:800px;
    background-color: #000;
    display:none;
}

JS:

$(document).ready(function() {
$('.sidenav a').click(function(){
    $('.infozone').fadeOut(850);
    var region = $(this).attr('data-region');
    $('#' + region).fadeIn(850);
    });
});
4

2 に答える 2

2

アニメーションをチェーンするにはfadeIn、 のコールバック内に を配置fadeOutし、関数が現在表示されている場合はキャンセルするには、div が既に表示されているかどうかを確認します。

.infozoneまた、現在のdiv が表示されているかどうかを確認するチェックを追加する必要がありました。それ以外の場合fadeOutは、非表示の要素にも適用され、コールバックが複数回発生します。

$(document).ready(function() {
    $('.sidenav a').click(function(){
        var region = $(this).attr('data-region');
        var $region = $('#' + region);
        if ($region.is(':visible')) return;

        var $infozone = $('.infozone:visible');

        if ($infozone.length === 0) {
            $region.fadeIn(850);
        } else {
            $infozone.fadeOut(850, function() {
                $region.fadeIn(850);
            });
        }
    });
});
于 2013-03-05T14:33:51.600 に答える
0

あなたはそのような何かをすることができます：

htmlこれにより、javascriptが無効になっているときにページが機能するようになります。

<header>
    <ul class="sidenav">
        <li><h2><a href="#nav-1">About</a></h2></li>
        <li><h2><a href="#nav-2">Services</a></h2></li>
        <li><h2><a href="#nav-3">Team</a></h2></li>
        <li><h2><a href="#nav-4">News</a></h2></li>
        <li><h2><a href="#nav-5">Contact</a></h2></li>
    </ul>
</header>

hrefは、表示するIDを指していることに注意してください。これは、ページにアクセスできるようにする場合のスクリーンリーダーでも機能します。

javascript。私はそれをテストしていません、あなたはいくつかのことを修正しなければならないかもしれません、しかし考えはそこにあります

$(document).ready(function() {
    $('.sidenav a').click(function(e){

    var href = $(this).attr('href');

    // prevent default 
    e.preventDefault();

    // prevent clicked twice
    if(!$(this).hasClass('active'){
       $('.sidenav a').removeClass('active');
       $(this).addClass('active'){
       $('.infozone').fadeOut(850);
       $(href.substring(1)).fadeIn(850);
    }


});

また、いくつかのARIA属性とロール属性を追加することを検討する必要があります。

于 2013-03-05T14:37:06.843 に答える