Home » Jquery » jquery – Adding a class with a delay once in view

jquery – Adding a class with a delay once in view

Posted by: admin February 22, 2020 Leave a comment

Questions:

How would I add a delay effect to the following? It’s adding the ‘play’ class inViewport but I also want to add a delay for each instance of that, so they are fading in one at a time even when both in view.

;(function($, win) {
 $.fn.inViewport = function(cb) {
 return this.each(function(i,el){
   function visPx(){
     var H = $(this).height(),
         r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
     return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
   } visPx();
   $(win).on("resize scroll", visPx);
    });
 };
}(jQuery, window));

$(".statement-block").inViewport(function(px){
if(px) $(this).addClass("play") ;
});
How to&Answer: