превключете анимацията на един екземпляр на множество класове

с известна помощ от общността успях да адресирам единичен екземпляр на клас, който се среща повече от веднъж, без да засяга другите класове. Благодаря!

<div class="trigger">
   <p class="mover"> some content </p>
/div>

<div class="trigger">
   <p class="mover"> some content </p>
/div>

това, което сега се опитвам да направя, е да превключа анимация за този единствен екземпляр. когато се щракне върху "trigger-"div, искам неговото дете (двигател) да се премести надясно. изглежда, че работи.

това, което не работи е, ако щракна върху следващия тригер, преди да превключа предишната анимация обратно. причината е очевидна, предполагам (съхранената променлива не е зададена обратно), но нямам представа как да го направя.

var state="on";
$('.trigger').click(function() {
    if(state == "on"){
         $(this).children(".mover").animate({'margin-right': '-=40px'},'fast'); 
        return state="off";
    } else if(state == "off") {
         $(this).children(".mover").animate({'margin-right': '+=40px'},'fast');
        return state="on";
    }
});

Благодаря много!


animation toggle jquery css onclick
person benniy    schedule 07.01.2014    source източник
comment
Не можете ли да му присвоите id?   -  person Dryden Long    schedule 08.01.2014

Отговори (1)


arrow_upward
0
arrow_downward

Съхранявайте вашите state в .data() за всеки отделен .trigger:

$('.trigger').data('state','on').click(function() {
    if($(this).data('state') == "on"){
         $(this).children(".mover").animate({'margin-right': '-=40px'},'fast'); 
        $(this).data('state','off');
    } else if($(this).data('state') == "off") {
         $(this).children(".mover").animate({'margin-right': '+=40px'},'fast');
        $(this).data('state','on');
    }
});

или по-ефективно:

$('.trigger').data('state',true).click(function() {
    if($(this).data('state')){
         $('.mover',this).animate({'margin-right': '-=40px'},'fast'); 
         $(this).data('state',false);
    } else {
         $('.mover',this).animate({'margin-right': '+=40px'},'fast');
         $(this).data('state',true);
    }
});
person Blazemonger    schedule 07.01.2014