Listener for class change in javascript/JQuery

Question

I have a piece of code that changes the class of a div when i click some arrows (basically a slider), I cant find a jquery code though that listens to when the class changes and does an animation. For example I need it to do this function.

if(*classname* == slide1){
    //************ Background Settings *************
    $(".background").css('background','url("img/park.png")')
    //************ slide 1 Animations *************
    $(".s1").animate({
        opacity:1
    },500)
    $("#header1").animate({
        opacity:1
    },500)
    $("#p1").animate({
        opacity:1
    },500)
    $("#image1").animate({
        left:140
    },1000)
}

and my class changing code is this

var page_number = 0

function next(){

var current_slide = page_number;
if(current_slide == 0){
$("section").removeClass('starterslide').addClass('slide2')
page_number = 2
}
else if(current_slide == 1){
$("section").removeClass('slide1').addClass('slide2')
page_number = 2
}
else if(current_slide == 2){
$("section").removeClass('slide2').addClass('slide3')
page_number = 3
}
else if(current_slide == 3){
$("section").removeClass('slide3').addClass('slide1')
page_number = 1
}
}

function back(){
var current_slide = page_number;

if(current_slide == 0){
$("section").removeClass('starterslide').addClass('slide3')
page_number = 3
}
else if(current_slide == 1){
$("section").removeClass('slide1').addClass('slide3')
page_number = 3
}
else if(current_slide == 2){
$("section").removeClass('slide2').addClass('slide1')
page_number = 1
}
else if(current_slide == 3){
$("section").removeClass('slide3').addClass('slide2')
page_number = 2
}
}

There is no such function, put your animation login in a seperat function and call that function when you change the class. — adeneo, Nov 26 '12 at 18:01
possible duplicate of [jQuery - Fire event if CSS class changed](http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed) — Adriano Carneiro, Nov 26 '12 at 18:02
Maybe you can use hasClass .. if( $(this).hasClass('slide1') ) — Sushanth --, Nov 26 '12 at 18:02
possible duplicate of [event trigger on class change](http://stackoverflow.com/questions/10612024/event-trigger-on-class-change) — Colin Brock, Feb 09 '15 at 00:05

score 2 · Answer 1 · answered Nov 26 '12 at 18:04

2

You can use a trigger to raise your own event.

$(this).addClass('myClass');
$(mySelector).trigger('classChanged')
$(otherSelector).bind('classChanged', data, function(){ //do stuff here });

answered Nov 26 '12 at 18:04

Gurpreet Singh

20,907
5
44
60

inhan · Answer 2 · 2012-11-26T20:06:53.993

You can alternatively extend these 2 jQuery function like:

(function($) {
    classFuncs = {add:$.fn.addClass,remove:$.fn.removeClass}
    $.fn.addClass = function() {
        classFuncs.add.apply(this,arguments);
        if ($(this).is($('section'))) {
            // do whatever you like when a class is added
            // if it is a 'section' node
        }
        return $(this);
    }
    $.fn.removeClass = function() {
        classFuncs.remove.apply(this,arguments);
        if ($(this).is($('section'))) {
            // do whatever you like when a class is removed
            // if it is a 'section' node
        }
        return $(this);
    }
})(jQuery);

But that's an overkill for this situation.

score 0 · Answer 3 · answered Nov 26 '12 at 18:02

0

Put all the relevant code in a click function...(pseudo code below)

$('div').click(function(){
    $(this).addClass('className');
    $(this).animate();
});

answered Nov 26 '12 at 18:02

pmandell

4,288
17
21

I ended up just putting the animation code inside of the class changing code and it works just fine, no need to listen to when class changes. – Kalden Nov 27 '12 at 01:46

Listener for class change in javascript/JQuery

3 Answers3