CODEWITHSUNDEEP
jqueryclassslider
Kalden
Kalden

Reputation: 222

Listener for class change in javascript/JQuery

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

Upvotes: 0

Views: 7972

Answers (3)

inhan
inhan

Reputation: 7470

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.

Upvotes: 2

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

You can use a trigger to raise your own event.

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

Upvotes: 2

pmandell
pmandell

Reputation: 4328

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

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

Upvotes: 0

Related Questions