在没有屏幕刷新的情况下，使用 jQuery 更改不透明度在 Chrome 或 Safari 中不起作用

Posted 2023-03-06

【中文标题】在没有屏幕刷新的情况下，使用 jQuery 更改不透明度在 Chrome 或 Safari 中不起作用

【英文标题】：Changing opacity using jQuery doesn't work in Chrome or Safari without screen refresh

【发布时间】：2012-06-23 01:39:10

【问题描述】：

我希望在点击时显示/隐藏内容，并设置 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 不透明度的替代方法。谢谢！

【参考方案1】：

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

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

见http://www.w3schools.com/cs-s-ref/pr_class_visibility.asp

【讨论】：

感谢黄教！尤其是速度如此之快。

【参考方案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');
);

【讨论】：

感谢 Mathletics，但 Huangism 更早到达了那里。

【参考方案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');
        );
    );

【参考方案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');
);

希望它对某人有所帮助！