Jquery .fadeToggle（）在第二次循环后停止

我正在尝试编写一个事件，在单击元素后使用淡入淡出过渡显示文本。代码似乎只运行一次，但我希望它是一个切换/取消切换文本的无限循环。在文本中切换一次，然后再切换一次后，

.fadeToggle（）

似乎停止了反应，但其他一切似乎都正常工作。我需要这种方法是因为

.visuallyhidden

对于屏幕阅读器来说是必须的（为了美观，淡入淡出过渡）

---

谢谢你的意见！我发现我遇到的问题与.queue（）有关。我只需在该函数之后添加.dequeue（），它现在就可以工作了

谢谢

编辑：我实际上改变了代码的整个工作方式，并将在这里分享。这（我相信）是一种处理淡入淡出切换的好方法，同时保持内容屏幕阅读器的可访问性（假设代码中隐藏了某种视觉效果）

---

我很高兴你能来StackOverflow:）我相信你会得到一些关于如何编写更好代码的好建议！Welcome除了你的问题之外，看看你的代码在可能的情况下使用链接会是什么样子，当停止反复搜索相同的节点，而是将它们缓存到变量中时，性能会更好：谢谢@kidwan！幸运的是，我不是开发/清理代码的最后一个人。哈请随意填补我提供的小提琴中的

HTML

和

css

之间的空白，这样人们就可以估计出真正的问题所在并帮助您。@Kidwan我在这里添加了css和HTML:。我删除了第二个.parent（）是为了把它放在小提琴上。我让它上两次是因为我把反应和动作嵌套在列中，但它们不是必需的。

$(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);

    }
});

$(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();

                    });

                }
        });   
});