Check for change in Javascript element property

0

I have some div 's of id 1 , 2 and 3 , respectively. They are within the page of class home .

For example:

<div class="home">
  <div id="1" style="transform: translateX(0px);">blabla</div>
  <div id="2" style="transform: translateX(-1903px);">blabla</div>
  <div id="3" style="transform: translateX(-3806px);">blabla</div>
</div>

What I need to do is check the change in transform of these elements (no click, used to slide, when passed with mouse) to leave links with specific class.

I'm currently using this function:

var slider1 = $( '.home div#1' ).css( "transform" );
    var slider2 = $( '.home div#1' ).css( "transform" );
    var slider3 = $( '.home div#1' ).css( "transform" );
    if (slider1 == 'matrix(1, 0, 0, 1, 0, 0)') {
      $('.home a[href="#slider-1"]').addClass('slide-ativo');
      $('.home a[href="#slider-2"]').removeClass('slide-ativo');
      $('.home a[href="#slider-3"]').removeClass('slide-ativo');
      alert(slider1);
    } else if (slider2 == 'matrix(1, 0, 0, 1, -1903, 0)') {
      $('.home a[href="#slider-2"]').addClass('slide-ativo');
      $('.home a[href="#slider-1"]').removeClass('slide-ativo');
      $('.home a[href="#slider-3"]').removeClass('slide-ativo');
      alert(slider2);
    } else if (slider3 == 'matrix(1, 0, 0, 1, -3806, 0)') {
      $('.home a[href="#slider-3"]').addClass('slide-ativo');
      $('.home a[href="#slider-1"]').removeClass('slide-ativo');
      $('.home a[href="#slider-2"]').removeClass('slide-ativo');
      alert(slider3);
    } else {
      alert('error');
};

But only recognizes when the page loads, I need to recognize when the element property changes.

    
asked by anonymous 29.08.2018 / 16:40

2 answers

0

I made this example and I believe that is the solution to your problem.

    
29.08.2018 / 18:37
0

You need to watch these changes (watcher).

Get Connected: link

Here is the simple documentation for you to observe and observe changes in javascript properties:

link

    
29.08.2018 / 16:50