animation - re-binding a click event / toggling between 2 elements, simple Jquery Quiz -


so im bit stuck on working on;

i'm brand new jquery , javascript world , i'm sure there more efficient way this, now, have.

basically when user clicks on 'answer' element animate on page. there 2 answers matching elements animate if corresponding 'answer' clicked.

right now, when user clicks on 1 answer multiple times, continues animate; need when user clicks on answer, animates once, , stops, user either leaves it, or when click other' answer', performs animation, becomes re-binded reclick. sort of toggling , forth between 2 answers/corresponding animations.

i'm having trouble re-binding becomes available click again. sort of in loop.

hope im explaining ok! can point me in right direction this.

here js, fiddle below of im at.

   /*answer1*/ $('ul#quiz li:nth-child(2)').on("click", function() {   $(this).addclass('active');   $(this).siblings().addclass('deactive');   $(this).siblings().removeclass('active');   $(this).removeclass('deactive');   if ($('ul#quiz li:nth-child(3)').hasclass('deactive')) {       $('.circle2').animate({           width: "80px",           height: "80px"       });   }   if ($(this).hasclass('active')) {       $('.circle1').animate({           width: "+=3.5%",           height: "+=3.5%"       });   }  });    /*answer2*/  $('ul#quiz li:nth-child(3)').on("click", function() {   $(this).addclass('active');   $(this).siblings().addclass('deactive');   $(this).siblings().removeclass('active');   $(this).removeclass('deactive');   if ($('ul#quiz li:nth-child(2)').hasclass('deactive')) {       $('.circle1').animate({           width: "80px",           height: "80px"       });   }    if ($(this).hasclass('active')) {       $('.circle2').animate({           width: "+=3.5%",           height: "+=3.5%"       });     }    });        

fiddle

you want animate if answer not in active state. wrap in click handlers in

if($(this).hasclass('active') === false) { } 

for credit assignment, move of click handler stuff out separate function , call 1 function both click handlers, rather duplicating code in both. luck!


Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -