監聽器在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的

回答

相關問題