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.