Q:

Jquery script in Wordpress hide/show class in viewport

Running Wordpress with jQuery. Can't seem to get this script to work.
<script>
  jQuery(document).ready(function($){
    if ($('.ADShow').is(':in-viewport')) {     
      $(".ADShow").delay(6000).slideDown(4000);
    } else { 
      $(".ADShow").hide();           
    }
  });
</script>

The class is hidden until within viewport. Then, when in viewport, a 6-second delay reveals the class div. Any help would be much appreciated.

A:

try this , with animation and some extra function for determining div is in view or not 
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));
    }

}

