Javascript Wordpress中的Jquery脚本在视口中隐藏/显示类

使用jQuery运行Wordpress。似乎无法使此脚本正常工作

<script>
  jQuery(document).ready(function($){
    if ($('.ADShow').is(':in-viewport')) {     
      $(".ADShow").delay(6000).slideDown(4000);
    } else { 
      $(".ADShow").hide();           
    }
  });
</script>

jQuery（文档）.ready（函数（$）{
如果（$（'.ADShow'）。是（':in viewport'）{
美元（“.ADShow”）。延迟（6000）。向下滑动（4000）；
}否则{
$（“.ADShow”）.hide（）；
}
});

该类在视口中之前是隐藏的。然后，当在viewport中时，6秒钟的延迟会显示class div。任何帮助都将不胜感激。

我不确定

是否是（“：在viewport中”）

可以这样使用

你使用的是这样的插件还是

我认为如果你使用这些，那么你可以使用：

---

$（'.ADShow:in viewport'）

作为选择器。

您的问题都在第一行

jQuery(document).ready(....

您的“文档”在完全加载时仅“准备就绪”一次，因此您的脚本可能正在工作，但运行得太早

也许您想多次检查元素是否在视口中，而不仅仅是在加载文档时

您可以通过以下几种方式完成此操作：

• 通过一个“间隔”，您可以每秒检查元素数百次，直到预期的事件发生
• 通过“滚动”事件，您可以在每次页面滚动时重复控件
• 使用第三方库，例如，当元素进入视口时，您可能会准确地调用函数，我敢打赌这正是您要寻找的

通过jQuery使用航路点，您可以编写如下内容：

$(document).ready(function() {
    $('.ADShow').waypoint({
        handler: function() {
            $(this).delay(6000).slideDown(4000);
        }
    });
});

---

试试这个，用动画和一些额外的函数来确定div是否在视图中

jQuery(document).ready(function($){


  var  animated = false;
  var element = $('.ADShow');
    curHeight = element.height();// taking height of div 
    element.css('overflow','hidden');// hiding completely
    zeroHeight = element.css('height','0px') // set height to 0 for hidiing div  

  jQuery(window).scroll(function () {

 if ( isScrolledIntoView(element,true)  && animated == false) { 
     element.height(zeroHeight).delay(6000).animate({height: curHeight}, 4000); // animate

// delay  the css also 
    setTimeout(function(){
          element.css('overflow','visible'); // set back proprty to it's default value 
     },6100)//you can change value to get desirable result

     animated = true; // set to true for executing only one time 
  }  
  })


});

/*
*================ Function  for determining div is in  view or not 
*/
function isScrolledIntoView(elem, partial) {

    if (jQuery(elem).length == 0){

         return false;
    }

    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

    var elemTop = jQuery(elem).offset().top;
    var elemBottom = elemTop + jQuery(elem).height();

    if (typeof partial == 'undefined' || partial == false) {
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    } else {
        return ((elemBottom <= docViewBottom && elemBottom >= docViewTop) || (elemTop >= docViewTop && elemTop <= docViewBottom));
    }

}

jQuery（文档）.ready（函数（$）{
var=false；
var元素=$（'.ADShow'）；
curHeight=element.height（）；//获取div的高度
css（'overflow'，'hidden'）；//完全隐藏
zeroHeight=element.css（'height'，'0px'）//将隐藏div的高度设置为0
jQuery（窗口）.滚动（函数（）{
如果（isScrolledIntoView（元素，true）&&animated==false）{
element.height（zeroHeight）.delay（6000）.animate（{height:curHeight}，4000）；//animate
//还要延迟css
setTimeout（函数（）{
css（'overflow'，'visible'）；//将property设置回它的默认值
}，6100）//您可以更改值以获得理想的结果
animated=true；//设置为true仅执行一次
}  
})
});
/*
*================用于确定div是否在视图中的函数
*/
函数为CrolledinToView（元素，部分）{
if（jQuery（elem）.length==0）{
返回false；
}
var docViewTop=jQuery（window.scrollTop（）；
var docViewBottom=docViewTop+jQuery（window）.height（）；
var elemTop=jQuery（elem）.offset（）.top；
var elemBottom=elemTop+jQuery（elem）.height（）；
if（typeof partial=='undefined'| | partial==false）{
返回（（elemBottom=docViewTop））；
}否则{
return（（elemBottom=docViewTop）| |（elemTop>=docViewTop&&elemTop）更好地解释它。您在控制台日志中是否收到任何错误或东西？没有错误。只是不工作。默认情况下，类应该隐藏，并且在视口中（向下滚动-刚好在折叠下方）时才显示（后延迟）。这非常有效。非常感谢，Artsrun。我也将尝试教授的方法，并将于今晚返回这里。顺便说一句，我注意到一个警告-div显示1/2秒，消失，然后动画运行。有点像FOUC场景。忽略：Setting element.css（'overflow'，'visible'））；to hidden似乎已经解决了这个问题。很好，文档就绪事件上的div消失，然后当滚动到它时，它开始动画化。注意，如果从视口中的div开始，那么您还需要在document ready函数jQuery（window.scroll（）；）内触发scroll，所以为了启动函数，这个函数工作得很好（jQuery（elem）.length==0）我在代码中只使用了这一个谢谢Hanks教授！我今天将尝试一下，今晚将返回这里。