监听器在JavaScript类变化/ JQuery的

我有一段代码，更改类一个div当我点击一些箭头（基本上是一个滑块），我无法找到一个jQuery代码虽然这听上课的时候变化和做一个动画。例如，我需要它来做这个功能。监听器在JavaScript类变化/ JQuery的

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

和我的课改变的代码是这样

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

来源

2012-11-26 Kalden

有没有这样的功能，把你的动画登录在一个seperat函数，并在您更改类时调用该函数。 – adeneo

[jQuery的火灾事件，如果CSS类改变]的可能重复（http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed） –

也许你可以使用hasClass ..如果（$（本）.hasClass（ '滑件1'））的[事件触发阶级变化] –

把所有相关的代码点击功能...（以下伪代码）

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

来源

2012-11-26 18:02:59 pmandell

我结束只需将动画代码放入类更改代码中即可，并且工作得很好，无需在类更改时收听。 – Kalden

您可以使用触发器提出你自己的事件。

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

来源

2012-11-26 18:04:14

您也可以扩展这些2 jQuery的功能，如：

(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);

但是，这是造成这种局面的矫枉过正。

来源

2012-11-26 18:14:44 inhan

监听器在JavaScript类变化/ JQuery的

回答

相关问题