Detecting that a link class has changed

Question

Possible Duplicate:
Class name change Event in jQuery

I am using jquery along side bxsilder.

I need jquery to recognise a class change on a link which will then animate an image along a line.

On page load div1 .pager-active moves the image along the line to left: 15% When next is pressed the link under div2 gets the class .pager-active and so on.

So I need jquery to recognise that div2 now has the class .pager-active there for animating the img to left:50%

Below is the code I have been working with which works on initial load for div1 but doesn't detect any class changes after load.

if( $('#div1 .pager-active').length){
    $('.line img').animate({'left' : '15%'},600);
        };

if( $('#div2 .pager-active').length){
    $('.line img').animate({'left' : '50%'},600);
        };

if( $('#div3 .pager-active').length){
    $('.line img').animate({'left' : '85%'},600);
        };

Any help would be great.

Answer 1

You can get the class change event as posted here :

Class name change Event in jQuery

but you may try this solution too :

When next is pressed, get id of div having class .pager-active . Use getAttr() for this. Once you have the id, remove it's class, attach class to next div in line and perform the effect.

Answer 2

var oldClass = $("#div").attr('class');
if(oldClass != $("#div").attr('class');
{
 //Do something?
}

Something like that maybe?

Answer 3

try DOMAttrModified event:

document.getElementsById('div2').addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    ...
  }
}, false);