问题：JQuery - trigger call on div becoming visible

原因：需要在div显示时触发调用

解决方法：可以使用$(window).resize()来检测所需元素的css显示变化。

代码如下：

$(window).resize(function() {
  var divDisplay = $('.mobileHide').css("display");
  if (divDisplay === "block") {
    $('.status').css('display', 'block');
    //do stuff
  } else {
    $('.status').css('display', 'none');
  }
});

点击这里查看可调整大小的示例。

在这个例子中，当点击页面时，一个隐藏的div元素会变得可见，并触发一个名为myFunction的函数。这个函数使用setTimeout方法，在2秒后将"foo foo"打印到控制台。

这个问题的出现原因是在div变为可见之前就触发了myFunction函数。由于div初始时是隐藏的，所以在点击页面时，myFunction函数会立即被触发，而不是在div变为可见后才触发。

解决这个问题的方法是在div变为可见后再触发myFunction函数。这可以通过使用jQuery的回调函数来实现。具体来说，可以使用fadeIn方法来使div渐渐变为可见，并在完成渐变后触发回调函数。在回调函数中触发myFunction函数即可。

下面是修改后的代码：

$(document).ready(function(){
  function myFunction(){
    setTimeout(function(){ console.log('foo foo') }, 2000)
  }
  
  $(document).click(function(){
    $('#demo').fadeIn(500, function(){
      myFunction();
    });
  })
});

click

  
hello world

这样修改后，当点击页面时，div会以渐变的方式变为可见，然后在渐变完成后触发myFunction函数，从而实现了在div变为可见后才触发函数的效果。

JQuery - trigger call on div becoming visible的问题是一个关于如何在div元素可见时触发调用的问题。根据给出的解决方法，问题的出现原因可能是需要在特定条件下执行一些操作，例如在div元素变得可见时触发某个函数。

解决方法是使用window.matchMedia()方法，并设置相关的事件监听器来过滤事件的匹配属性。具体的实现代码如下：

var widthMatch = window.matchMedia("(min-width:500px)");
if(widthMatch.matches) {
  divIsVisible();
}
widthMatch.addListener(function(e){
  if(e.matches) {    
    divIsVisible();
  }
});
function divIsVisible(){
  console.log('DIV is visible!')
}

以上代码中，首先使用window.matchMedia()方法创建一个媒体查询对象，该媒体查询对象用于判断div元素是否满足特定的条件（例如宽度大于500px）。然后，在页面加载时和每次媒体查询对象的状态改变时，都会调用divIsVisible()函数来处理div元素可见的情况。

通过使用window.matchMedia()方法和相关的事件监听器，可以在div元素可见时触发调用某个函数。这种方法不会像DOM mutator一样产生性能问题，因为它是使用原生的window.matchMedia() API实现的（对于旧版本浏览器可能存在一些兼容性问题）。

以上就是关于JQuery - trigger call on div becoming visible问题的出现原因和解决方法的整理。