0

Tenho algumas div's de id 1, 2 e 3, respectivamente. Elas estão dentro da page de class home.

Por exemplo:

<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>

O que eu preciso fazer é verificar a alteração no transform desses elementos (sem clique, usado para slide, quando passado com mouse) para deixar os links com class específica.

Atualmente estou usando essa função:

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');
};

Mas só reconhece quando a página é carregada, preciso que reconheça quando a propriedade do elemento for alterada.

2 Respostas 2

0

Fiz este exemplo e acredito que sejá a solução para o seu problema

0

Você precisa passar a "observar" estas alterações (watcher).

Se liga em: https://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript

Aqui tá a documentação simples pra você observar e para de observar alterações em propriedades javascript:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .