jquery - 在不刷新屏幕的情况下，使用 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

如果你想让它占据空间，那么使用visibility:hidden

执行addClass和removeClass，但使用可见性而不是不透明度，看看是否得到你想要的

参见http://www.w3schools.com/cssref/pr_class_visibility.asp