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%" }); } });
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
Post a Comment