CODEWITHSUNDEEP
jquerytransition
camh
camh

Reputation: 11

.fadeToggle() stops after second loop

I'm trying to write an event that uses a fade transition to display text after clicking on an element. The code seems to be working with one pass, but I'd like it to be an infinite loop of toggling/untoggling the text. After toggling in the text once and then toggling out once, .fadeToggle() seems to stop reacting, yet everything else seemingly functions as normal. I needed this method because .visuallyhidden is a must for screen reader purposes (and fade transitions for 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);

    }
});

Upvotes: 0

Views: 261

Answers (1)

camh
camh

Reputation: 11

Thank you for your input! I discovered that the issue I was having was with .queue(). I simply add .dequeue() after that function and it's working now.

Thank you!!

Edit: I actually changed the entire way the code worked and will share it here. This is (what I believe) a nice way to handle fade toggles while still keeping the content screen reader accessible (assuming you have some sort of visually hidden in your 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();

                    });

                }
        });   
});

Upvotes: 1

Related Questions