1

我希望在点击时显示/隐藏内容，并设置 CSS 不透明度而不是使用toggle()或hide()，show()因为我希望内容仍然占据页面上的空间。

这是问题页面（单击右上角的 wee 按钮隐藏/显示内容）：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

如果您希望它占用空间，请使用可见性：隐藏

做 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

我发现每当一个浏览器，不管是哪个，有绘画问题，你只知道你的代码没有问题（一个放弃是预期的结果会出现在所有其他浏览器中）：然后简单地做阅读此属性，您应该没问题。读取迫使有故障的浏览器“注意”。像这样：

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 回答
0

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

希望它会帮助别人！

于 2014-12-17T13:44:24.497 回答