How to bind to 'inview' event on multiple elements

Question

I'm playing around with Velocity.js and jquery.inview, and I want all the titles on my page to slideDownIn when they come into view. This code works fine for the first title:

$('.movies-title').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
  if (isInView) {
    // element is now visible in the viewport
    if (visiblePartY == 'top') {
      // top part of element is visible
    } else if (visiblePartY == 'bottom') {
      // bottom part of element is visible
    } else {
      // whole part of element is visible
      $(this).velocity("transition.slideDownIn", 500);      
    }
  } else {
    // element has gone out of viewport
    $(this).velocity("reverse");
  }
});

If I copy and paste the above several times and replace .movies-title with the classes of the other titles, it works as I want it to.

However, that seems like a lot of extra code. I tried changing $('.movies-title') to $(.movies-title, .tv-title, .books-title) but then the animation only works for the last element in the list. I also tried adding a new class called .title to all of the titles and changing .movie-title to .title but that didn't work either.

What am I doing wrong? How can I condense the code?

A fiddle would be really helpful if you want some more specific help — ajmajmajma, Dec 03 '14 at 18:48

score 2 · Answer 1 · answered Dec 03 '14 at 18:40

2

The best solution is to use a single class on each of these elements since they have something so in common. You might just add title as a class type and apply it to that class.

<div class="title movie-title"></div>

I know you mentioned this in your question, but I can't see why this wouldn't work.

answered Dec 03 '14 at 18:40

OneHoopyFrood

3,829
3
24
39

I agree ... you should add a class that is the same on all of the objects you want to manipulate, then it is a single jQuery selection. – rfornal Dec 03 '14 at 18:41
It only works on the last element with the class `title`. The other titles above it do not animate. – mcography Dec 03 '14 at 18:42
Can you post some example code either via jsfiddle or the on-site tool? I can't see what the issue is to help you. – OneHoopyFrood Dec 03 '14 at 18:47

score 1 · Accepted Answer · answered Dec 03 '14 at 19:04

1

Try using delegate instead of bind for multiples. Also make a unified class for all of them (I just used title)

so like this -

$('body').delegate('.title','inview', function(event, isInView, visiblePartX, visiblePartY) {

Edit - sorry linked wrong fiddle initially

see fiddle http://jsfiddle.net/d1g7sLxq/3/

answered Dec 03 '14 at 19:04

ajmajmajma

13,712
24
79
133

Thank you, that worked. Can you explain why your solution works and my original code didn't? What is the difference between delegate and bind? – mcography Dec 03 '14 at 19:08
No problem! Bind only binds a single event, whereas delegate just adds event listeners. – ajmajmajma Dec 03 '14 at 19:10
@ajmajmajma Wait, why doesn't `.on()` work with this when it works with standard events like `click` on multiple elements just fine. Is this just because of some implementation detail of the `inview` event? – OneHoopyFrood Dec 03 '14 at 19:23
@OneHoopyFrood Oh interesting! must be because of inview like you're saying. – ajmajmajma Dec 03 '14 at 20:03

How to bind to 'inview' event on multiple elements

2 Answers2