1

toggle()クリック時にコンテンツを表示/非表示にしたいのですが、またはhide()を使用するのではなく、CSSの不透明度を設定しshow()ています。また、コンテンツがページのスペースを占有するようにしたいのです。

問題のページは次のとおりです（右上のウィーボタンをクリックしてコンテンツを表示/非表示にします）：http：//indigobrazilianportuguese.com/about-us/

そしてjQuery：

$('.close').toggle(function() {
    $(this).siblings('p').text('Show content');
    $('#container').css('opacity', 0);
    $('#footer-container').css('opacity', 0);
}, function() {
    $(this).siblings('p').text('Show image');
    $('#container').css('opacity', 1);
    $('#footer-container').css('opacity', 1);
});

FirefoxとOperaでは問題なく動作しますが、ChromeやSafariでは動作しません。

ChromeとSafariでは、画面を更新して機能させる必要があります（たとえば、ブラウザウィンドウのサイズを変更すると、コンテンツが表示/非表示になります）が、サイトの他のページでは同じボタンが正常に機能します...

また、CSSの不透明度の変更を適用するために、クラスの追加/削除を追加してみましたが、運が悪かったです。

任意のヒント？CSSの不透明度に代わるものを使用することを受け入れます。ありがとう！

4

4 に答える 4

2

スペースを占有したい場合は、visibility:hidden を使用してください

addClass と removeClass を実行しますが、不透明度の代わりに可視性を使用して、必要なものが得られるかどうかを確認します

http://www.w3schools.com/cssref/pr_class_visibility.aspを参照してください。

于 2012-06-20T20:31:23.003 に答える
2

これを試して：

$('.close').toggle(function() {
    $(this).siblings('p').text('Show content');
    $('#container, #footer-container').css('visibility', 'hidden');
}, function() {
    $(this).siblings('p').text('Show image');
    $('#container, #footer-container').css('visibility', 'visible');
});
于 2012-06-20T20:36:59.560 に答える
0

私は、どのブラウザーでも描画に問題があり、コードに問題がないことを知っているだけであることを発見しました(1 つは、期待される結果が他のすべてのブラウザーに表示されることです)。このプロパティを読み取れば問題ありません。読み取りは、障害のあるブラウザーに「注意を払う」ことを強制します。そのようです：

var never_mind_me = $(elem).css('opacity');

そして、その値を破棄するだけです（したがって、値を変数に保存する必要さえないはずです。私の例では、読みやすくするためにそうしました）。それはトリックを行う必要があります。そしてもちろん、その読み取りを適切な場所に配置するようにしてください (!重要)。より完全な例を次に示します。

$('#myDiv').css('opacity', 0.5);
$('#myButton').on('click', function () {
    $('#myDiv').animate({opacity: 1}, {duration: 1000, complete: function () {
        // Oh no, we figured one or another
        // browser didn't finish his painting job.
        // The sorcery should be applied here:
        $(this).css('opacity');
        }});
    });
于 2012-10-12T19:55:34.967 に答える