Question

我正在尝试编写一个使用淡入淡出过渡来单击元素后显示文本的事件。代码似乎只使用了一次，但我希望它是一个无限循环切换/取消文本。在对文本进行一次切换然后切换出一次之后，.fadeToggle()似乎停止了反应，但其他一切看起来都正常。我需要这种方法，因为.visuallyhidden是屏幕阅读器必备的必要条件（并且为了美学目的而淡化过渡）。

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

    }
});

Answer 1

感谢您的投入！我发现我遇到的问题是.queue（）。我只是在该函数之后添加.dequeue（）并且它现在正在工作。

谢谢！

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

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

                    });

                }
        });   
});

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

1 个答案: