jQuery 中的 onHide() 类型事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2857900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onHide() type event in jQuery
提问by Sam
Does anyone know of an onHide() event or something similar in jQuery?
有谁知道 jQuery 中的 onHide() 事件或类似的东西？
I tried:
我试过：
$(this).bind('hide', function(){
console.log('asdasda')
})
But apparently that doesn't work.
但显然这行不通。
Edit:Just to clarify, it's being hidden using CSS display:none.
I'm aware of the callback function but as I'm not hiding it (the CSS is) I can't use it.
For what it's worth, I need to check when a dropdown is visible. It's being shown by the following CSS:
编辑：只是为了澄清，它使用 CSS 隐藏display:none。
我知道回调函数，但由于我没有隐藏它（CSS 是），我无法使用它。对于它的价值，我需要检查下拉菜单何时可见。它由以下 CSS 显示：
ul li:hover ul {
display: block;
}
采纳答案by sohtimsso1970
There is no "hide" event for any HTML element in the DOM. How are you "hiding" your elements? Are you using CSS to change the display or visibility?
DOM 中的任何 HTML 元素都没有“隐藏”事件。你如何“隐藏”你的元素？您是否使用 CSS 来更改显示或可见性？
If you're using display:none to hide an element, you can't detect when CSS changes. In IE, you can detect when a property changes but that doesn't extend to style values. You'll need to throw an event or do whatever the event is doing at the time the CSS display is changed.
如果您使用 display:none 隐藏元素，则无法检测 CSS 何时更改。在 IE 中，您可以检测属性何时发生更改，但不会扩展到样式值。您需要抛出一个事件或在 CSS 显示更改时执行该事件正在执行的任何操作。
回答by PetersenDidIt
There isn't a native or built in "hide" event but if you are using jQuery to hide it you can easily add a hide event:
没有原生或内置的“隐藏”事件，但如果您使用 jQuery 隐藏它，您可以轻松添加隐藏事件：
var _oldhide = $.fn.hide;
$.fn.hide = function(speed, callback) {
$(this).trigger('hide');
return _oldhide.apply(this,arguments);
}
回答by Faisal Ahsan
You can pass call back function in hide function.
您可以在隐藏函数中传递回调函数。
function iAmCallBackForHide() {
alert('I am visible after hide');
}
$('#clickMeToHide').hide( iAmCallBackForHide );
回答by sohtimsso1970
For anyone finding this post two years later:
对于两年后找到这篇文章的任何人：
You know exactly when the menu is visible, right?! The CSS rule tells you. So instead of relying on onShow or onHide events, you can recreate the very same ruleusing jQuery and rely on the very same 'hover event':
您确切知道菜单何时可见，对吗？！CSS 规则告诉你。因此，您可以使用 jQuery重新创建完全相同的规则并依赖完全相同的“悬停事件” ，而不是依赖 onShow 或 onHide 事件：
$('ul li').hover(function () {
// Whatever you want to do 'onShow'
}, function () {
// Whatever you want to do 'onHide'
});
Also, your script now acts independent of any stylesheet, so that presentation details do not dictate website behavior (nice).
此外，您的脚本现在独立于任何样式表，因此演示细节不会决定网站行为（很好）。
回答by trn
In jQuery 3 exposes a "hide" and "show" events.
在 jQuery 3 中公开了“隐藏”和“显示”事件。
$(document).on("hide", function() {
console.log("browser page has been hidden");
});
回答by Pratik Soni
I have recently made a plugin to detect when an element gets hidden or shown in any way ( by core javascript or inspector or jQuery hide / show ).
我最近制作了一个插件来检测元素何时被隐藏或以任何方式显示（通过核心 javascript 或检查器或 jQuery hide / show ）。
This extension keeps watching on element for visibility change. once changed it will emmit an event where you can handle your stuff
此扩展程序会持续关注元素的可见性变化。一旦更改，它将发出一个事件，您可以在其中处理您的东西
$("#test_hidden").hideShow(function(e, visibility){
if(visibility == "shown") {
console.log("Element is visible");
} else {
console.log("Element is hidden");
}
})
回答by JerryGoyal
Easy-pizy, use DOM mutation observersfor this:
Easy-pizy，为此使用DOM 突变观察者：
JS:
JS：
var observer = new MutationObserver(function(mutations) {
console.log('div hide event fired!');
});
var target = document.querySelector('.mydiv');
observer.observe(target, {
attributes: true
});
HTML:
HTML：
<div class='mydiv'>
</div>
Here's the fiddle https://jsfiddle.net/JerryGoyal/qs01umdw/2/
回答by Paco Zarate
This can be useful on some use cases: Using waitUntilExists jquery plugin (How to wait until an element exists?) you can detect when the value changes:
这在某些用例中很有用：使用 waitUntilExists jquery 插件（如何等待元素存在？）您可以检测值何时发生变化：
$(li:hidden).waitUntilExists(function(){
// your code when it is hidden
}, /*onlyOnce = */ true);
I used it for detecting when a loading gif was hidden.
我用它来检测加载 gif 何时被隐藏。
