0

私が取り組んでいる Web サイトでは、「.page-about」ボタンと「.page-contact」ボタンで div を展開してコンテンツを表示しています。div が展開されているときに他のボタンをクリックすると、コンテンツがフェードインおよびフェードアウトします。とてもシンプルです。

これはデスクトップで完全に機能します。私の iPhone では、最初は div が正常に展開されますが、既に展開されていて他のボタンがタップされている場合は、コンテンツの移行中に div の背景色がオフになり、すぐにオンに戻ります (グラデーションです)。コンテンツは完全にフェード インおよびフェード アウトしますが、なぜか背景が問題になっています。これがJavaScriptです：

$('.page-about').click(function(e) {
    e.preventDefault();
    if ($('#bb').hasClass('expand')) {
        if (contactvisible()){
            $('#contact-p').removeClass().addClass('contact-hid');
            $('#about-p').removeClass().addClass('about-vis');
        } else {
            $('#bb').removeClass('expand');
        }
    } else {
        $('#contact-p').removeClass().addClass('hidden');
        $('#about-p').removeClass().addClass('show');
        $('#bb').addClass('expand');
    }                   
});

$('.page-contact').click(function(e) {
    e.preventDefault();
    if ($('#bb').hasClass('expand')) {
        console.log(aboutvisible());
        if (aboutvisible()){
            $('#about-p').removeClass().addClass('about-hid');
            $('#contact-p').removeClass().addClass('contact-vis');
        } else {
            $('#bb').removeClass('expand');
        }
    } else {
        $('#about-p').removeClass().addClass('hidden');
        $('#contact-p').removeClass().addClass('show');
        $('#bb').addClass('expand');
    }                   
});

function aboutvisible(){
    if ($('#about-p').hasClass('about-vis') || $('#about-p').hasClass('show')) {
        return true;
    } else {
        return false;
    }
}

function contactvisible(){
    if ($('#contact-p').hasClass('contact-vis') || $('#contact-p').hasClass('show')) {
        return true;
    } else {
        return false;
    }
}

追加/削除されているクラスは、不透明度を変更しているだけです。また、CSS3 トランジションも添付されています。なぜこれがバックグラウンドで起こっているのかを理解するのを手伝ってくれる人はいますか? どのCSSもそれに触れていません。

HTMLは次のとおりです。

<div class="bottom-border" id="bb">
    <h1>Hi, my name is <span>Blank.</span></h1>
<div id="about-p" class="about-vis">
    <p>Filler text here</p>
    <p>more filler text</p>
</div>
<div id="contact-p" class="contact-vis">
    <p>This is how you can contact me</p>
        <div><i class="ss-icon">email</i><i class="ss-icon">dribbble</i><i class="ss-icon">twitter</i></div>
</div>
</div>

明確にするために、コンテンツは正常に移行していますが、何らかの理由で、含まれている div (#bb) の背景に影響を与えています。

ここにもCSSがあります：

#about-p, #contact-p {
position: absolute;
width: 100%;
}

.about-hid, .contact-hid {
opacity: 0;
-webkit-transition: opacity .35s ease;
-moz-transition: opacity .35s ease;
    -ms-transition: opacity .35s ease;
    -o-transition: opacity .35s ease;
transition: opacity .35s ease;
}

.about-vis, .contact-vis {
opacity: 1;
-webkit-transition: opacity .35s ease;
-moz-transition: opacity .35s ease;
    -ms-transition: opacity .35s ease;
    -o-transition: opacity .35s ease;
    transition: opacity .35s ease;
}

.hidden {
    opacity: 0;
}

.show {
    opacity: 1;
}
4

1 に答える 1

0

あなたのクラスには背景色がありませんよね。このcssを試してみてください、

.class {
    background-color: transparent !important;
}
于 2013-06-19T01:48:47.517 に答える