Question

使用jQuery运行Wordpress。似乎无法让这个脚本生效。

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

在视口内隐藏类。然后，在视口中，6秒延迟显示类div。任何帮助将不胜感激。

Answer 1

我不确定is(':in-viewport')是否可以像这样使用。

您使用的是此isInViewport或jquery_viewport的插件吗？

我想如果您使用过那些，那么您可以使用： $('.ADShow:in-viewport')作为选择器。

Answer 2

你的问题全都在第一行

jQuery(document).ready(....

你的“文档”只有一次“准备好”，当它完全加载时，你的脚本可能正在运行，但只是运行得太早。

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

您可以通过多种方式执行此操作：

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

在jQuery中使用Waypoint，您可以编写如下内容：

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

Answer 3

尝试这个，动画和一些额外的功能来确定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));
    }

}

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

3 个答案: