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

Popular posts from this blog

ios - iPhone/iPad different view orientations in different views , and apple approval process -

java Extracting Zip file -

C# WinForm - loading screen -