0

我正在尝试编写一个在单击元素后使用淡入淡出转换来显示文本的事件。该代码似乎可以一次性使用，但我希望它是一个切换/取消切换文本的无限循环。在切换一次文本然后切换一次之后，.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);

    }
});
4

1 回答 1

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

                    });

                }
        });   
});
于 2013-04-06T20:27:59.003 回答