jquery监听页面显示隐藏

在网页开发中，经常会遇到需要动态控制元素的显示与隐藏的情况。例如，在用户登录成功后，显示欢迎信息；或者在滚动页面时，当某一个元素滚动到屏幕中央时，开启元素的动画效果。针对这些需求，jquery提供了一些api来实现监听页面的显示与隐藏。

一、$(window).scroll()方法

$(window).scroll()方法表示当窗口滚动时触发的事件处理函数。通过监听窗口的滚动事件，可以实现某个元素的动态显示或隐藏效果。

下面是一个示例代码，当滚轮滚动到距离页面顶部500px的位置时，页面中的一个元素将会显示出来：

$(window).scroll(function(){  if($(window).scrollTop() >= 500){    $("#element").show();  }});

代码解释：

二、$(window).resize()方法

$(window).resize()方法表示当窗口尺寸发生变化时触发的事件处理函数。通过监听窗口的尺寸变化事件，可以动态调整页面中元素的大小和位置。

下面是一个示例代码，当窗口的宽度小于等于768px时，页面中的一个元素将会隐藏：

$(window).resize(function(){  if($(window).width() <= 768){    $("#element").hide();  }});

代码解释：

三、$(document).ready()方法与$(window).load()方法

$(document).ready()方法表示当页面 DOM 加载完成后触发的事件处理函数。$(window).load()方法表示当页面中所有元素（包括图片等资源）全部加载完成后触发的事件处理函数。在这两个方法中，也可以实现对页面元素的动态显示或隐藏操作。

下面是一个示例代码，当页面中所有元素全部加载完成后，页面中的一个元素将会显示出来：

$(window).load(function(){  $("#element").show();});

代码解释：

四、其它方法

除了上面介绍的方法外，jQuery还提供了其它一些方法来实现元素的动态显示或隐藏效果，例如：

总结：

以上介绍了几种实现动态控制元素的显示与隐藏的方法，它们可以通过不同的场景来实现对页面元素的动态控制。在实际开发中，应根据具体的需求来选择合适的方法，以实现更优秀的效果。