.fadeToggle（）在第二個循環後停止

我正試圖編寫一個事件，它使用淡入淡出過渡來單擊元素後顯示文本。代碼似乎只用了一遍，但我希望它是一個無限循環的切換/取消切換文本。在文本切換一次然後切換一次之後，.fadeToggle()似乎停止了反應，但其他一切看起來都正常。我需要這種方法，因爲.visuallyhidden是屏幕閱讀器必須的（爲了美觀的目的淡入淡出）。.fadeToggle（）在第二個循環後停止

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

    } 
});

來源

2013-04-05 camh

我很高興你來到StackOverflow :)我相信你會得到一些很好的建議如何編寫更好的代碼！歡迎 – 2013-04-05 23:03:57

除了問題之外，還有一點可以查看代碼在可能的情況下如何使用鏈接查找，並且在停止搜索同一個節點時將其緩存到變量中：http://jsfiddle.net/LPeVw/ – kidwon 2013-04-05 23:11:00

謝謝@kidwon！幸運的是，我不是開發/清理代碼行中的最後一個人。哈！ – camh 2013-04-05 23:16:42

謝謝您的輸入！我發現我遇到的問題是.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-06 20:27:59 camh

.fadeToggle（）在第二個循環後停止

回答

相關問題