使用 jQuery 检测可见性变化
使用动态内容时,有必要根据特定元素的可见性执行操作。 jQuery 提供了一种方法来附加在 div 可见时触发的事件处理程序。
解决方案:
要实现此目的,您可以扩展现有的 jQuery .show()可见性变化前后的方法和触发事件。下面是一个自定义扩展代码片段:
jQuery(function($) { var _oldShow = $.fn.show; $.fn.show = function(speed, oldCallback) { return $(this).each(function() { var obj = $(this), newCallback = function() { if ($.isFunction(oldCallback)) { oldCallback.apply(obj); } obj.trigger('afterShow'); }; // Trigger beforeShow event obj.trigger('beforeShow'); // Call the original show method with the new callback _oldShow.apply(obj, [speed, newCallback]); }); } });
用法:
要使用扩展的 .show() 方法,您可以将事件绑定到 beforeShow 和 afterShow 触发器。例如:
jQuery(function($) { $('#test') .bind('beforeShow', function() { alert('beforeShow'); }) .bind('afterShow', function() { alert('afterShow'); }) .show(1000, function() { alert('in show callback'); }) .show(); });
此代码将在 ID 为 test 的 div 显示和隐藏时触发 beforeShow 和 afterShow 事件,允许您根据可见性变化执行自定义代码。
以上是如何检测 jQuery 中元素的可见性变化?的详细内容。更多信息请关注PHP中文网其他相关文章!