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.