使用jQuery更改不透明度在Chrome或Safari中不起作用，而无需屏幕刷新

Question

我希望在单击时显示/隐藏内容，并且正在设置 CSS 不透明度，而不是使用 toggle() 或 hide() 和 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不透明度的替代方案。谢谢！

Answer 1

如果你想让它占用空间，那么使用 可见性：隐藏

执行addClass并删除Class，但使用可见性而不是不透明度，看看你是否得到了你想要的

请参阅 http://www.w3schools.com/cssref/pr_class_visibility.asp

Answer 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');
});

Answer 3

我发现每当浏览器（无论哪个浏览器）出现绘画问题时，您只知道您的代码没有问题（一个问题是预期的结果显示在所有其他浏览器中）： 然后只需读取此属性，您应该没问题。读取迫使有故障的浏览器"注意"。这样：

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');
        }});
    });

Answer 4

Chrome 中存在有关不透明度的已知问题。

不要使用"不透明度"来隐藏元素 - 使用"可见性"

在你的情况下不应该是这样的：

$('.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);
});

但应该是这样的：

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

希望它能帮助别人！