Trigger an event on different time of the same class JQUERY

Question

Please suggest an edit in the title as I'm not able to understand what should I name it.

Here's the HTML:

<div class='portfolio'>
      <h2 class='mainheading'>
        Recent From
        <span class='welcome-heading'>Portfolio</span>
      </h2>
      <hr>
      <div class='portfolio-row'>
        <div class='flip-container portfolio-for-transition jstransitionportfolio1' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-1'></div>
            <div class='back back-1'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio2' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-2'></div>
            <div class='back back-2'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio3' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-3'></div>
            <div class='back back-3'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio4' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-4'></div>
            <div class='back back-4'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio5' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-5'></div>
            <div class='back back-5'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio6' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-6'></div>
            <div class='back back-6'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio7' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-7'></div>
            <div class='back back-7'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio8' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-8'></div>
            <div class='back back-8'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio9' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-9'></div>
            <div class='back back-9'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio10' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-10'></div>
            <div class='back back-10'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio11' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-11'></div>
            <div class='back back-11'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio12' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-12'></div>
            <div class='back back-12'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio13' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-13'></div>
            <div class='back back-13'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio14' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-14'></div>
            <div class='back back-14'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio15' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-15'></div>
            <div class='back back-15'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio16' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-16'></div>
            <div class='back back-16'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
      </div>
    </div>

And here is JQuery:

$(window).scroll(function(){
  var xScroll = $(this).scrollTop();

  if(xScroll > $('.our-services-item1').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.our-services-item1').addClass('is-showing-our-services');
        },150);
    };
  var yScroll = $(this).scrollTop();

  if(yScroll > $('.our-services-item2').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.our-services-item2').addClass('is-showing-our-services');
        },150);
    };
  var aScroll = $(this).scrollTop();

  if(aScroll > $('.our-services-item3').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.our-services-item3').addClass('is-showing-our-services');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.our-services-item4').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.our-services-item4').addClass('is-showing-our-services');
        },150);
    };

  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio1').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio1').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio2').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio2').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio3').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio3').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio4').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio4').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio5').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio5').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio6').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio6').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio7').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio7').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio8').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio8').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio9').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio9').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio10').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio10').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio11').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio11').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio12').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio12').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio13').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio13').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio14').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio14').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio15').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio15').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio16').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio16').addClass('is-showing-jstransitionportfolio');
        },150);
    };

As you can see that these things are of the same class but I have to name them differently so the trigger is not fired for every element of the same class so I named them jstransitionportfolio[1-16]. But it increases my script time alot. I want to combine them in the single function so it decreases my script time, plus i won't have alot of classes and my code will be cleaner and nicer. Please help!

when you start your function?! I mean, you do all this **if** on page load, on windows scroll, or when? — Vixed, Feb 15 '16 at 12:30
Use widlcards - http://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors — StudioTime, Feb 15 '16 at 12:36
@UmerJaved but the class **is-showing** needs to be removed after I scroll all the body, or has to remain? — Vixed, Feb 15 '16 at 12:40
You should simply attach the event to a common class and use $(this) to make it work for each element — Aramil Rey, Feb 15 '16 at 12:43
@UmerJaved your class must remain with different numbers? if yes I have to review my answer. — Vixed, Feb 15 '16 at 13:32

score 2 · Accepted Answer · answered Feb 15 '16 at 12:45

Your code can be simplified :

$(window).scroll(function() {
    var xScroll = $(this).scrollTop();

    $(".some-class").each(function() {
        var that = this;
        if(xScroll > $(that).offset().top - ($(window).height() / 1.2)) {
            setTimeout(function(){
                $(that).addClass('some-other-class');
            },150);
        }
    });
});

You just have to change .some-class and some-other-class to some class name of your choosing.

Side note : Please be carefull when adding thing to the onScroll listener, at it will degrade the user experience, by slowing the scroll.

Thanks alot man. It really worked for me and my code is much cleaner now. And easy to understand too :) — Umer Javed, Feb 15 '16 at 13:55

score 0 · Answer 2 · answered Feb 15 '16 at 13:06

Before using this function, remove the numbers from your our-services-item and jstransitionportfolio classes. You can check the demo here

var setHeight=$(window).height() / 1.2;
var ourServices=$('.our-services-item');
var tranPortfolio=$('.jstransitionportfolio');

$(window).on('scroll',function(){

  var xScroll = $(this).scrollTop();

  ourServices.each(function(){
     var el=$(this);
     if(xScroll>(el.offset().top-setHeight))
      setTimeout(function(){el.addClass('is-showing-our-services')},150);
  });

  tranPortfolio.each(function(){
     var el=$(this);
     if(xScroll>(el.offset().top-setHeight))
      setTimeout(function(){el.addClass('is-showing-jstransitionportfolio')},150);
  });

});

Trigger an event on different time of the same class JQUERY

2 Answers2