jquery - .fadeToggle() stops after second loop -
i'm trying write event uses fade transition display text after clicking on element. code seems working 1 pass, i'd infinite loop of toggling/untoggling text. after toggling in text once , toggling out once, .fadetoggle() seems stop reacting, yet else seemingly functions normal. needed method because .visuallyhidden must screen reader purposes (and fade transitions aesthetic purposes).
$(document).ready(function () { $('.cel-clicktogglereaction').addclass('visuallyhidden'); $('.cel-clicktoggleaction').bind('click', openreaction); function openreaction() { $(this).parent().parent().find('.cel-clicktogglereaction').removeclass('visuallyhidden'); $(this).parent().parent().find('.cel-clicktogglereaction').hide(); $(this).parent().parent().find('.cel-clicktogglereaction').fadetoggle(500); $(this).attr('class', 'cel-clicktoggleactionopen'); $(this).parent().parent().find('.cel-clicktoggleactionopen').unbind(); $(this).parent().parent().find('.cel-clicktoggleactionopen').bind('click', closereaction); } function closereaction() { $(this).parent().parent().find('.cel-clicktogglereaction').fadetoggle(500); $(this).parent().parent().find('.cel-clicktogglereaction').delay().queue(function (next) { $(this).parent().parent().find('.cel-clicktogglereaction').addclass('visuallyhidden'); $(this).parent().parent().find('.cel-clicktogglereaction').show(); }); $(this).attr('class', 'cel-clicktoggleaction'); $(this).parent().parent().find('.cel-clicktoggleaction').unbind(); $(this).parent().parent().find('.cel-clicktoggleaction').bind('click', openreaction); } });
thank input! discovered issue having .queue(). add .dequeue() after function , it's working now.
thank you!!
edit: changed entire way code worked , share here. (what believe) nice way handle fade toggles while still keeping content screen reader accessible (assuming have sort of visually hidden in code).
$(document).ready(function () { $('.cel-clicktogglereaction').addclass('visuallyhidden').css('opacity', 0); $('.cel-clicktoggleaction').click(function(){ var reaction = $(this).parent().parent().find('.cel-clicktogglereaction'), opacity = reaction.css('opacity'); if (reaction.hasclass('visuallyhidden')) { reaction.removeclass('visuallyhidden').animate({opacity: (opacity==1?0:1)}); } else { reaction.animate({opacity: (opacity==1?0:1)}).queue(function (next) { reaction.addclass('visuallyhidden').dequeue(); }); } }); });
Comments
Post a Comment