在懸停添加/刪除類 - 並不總是工作

我正在實施一些動畫，通過添加和刪除類到mouseover和mouseout上的元素。我使用這種方法，因爲我發現單獨使用CSS是不可靠的;如果鼠標在動畫完成之前退出元素，動畫將無法完成。在懸停添加/刪除類 - 並不總是工作

所以我有以下代碼：

<div class="one flip-container"> 
    <div class="flipper"> 
     <div class="front"> 
      <!-- front content --> 
     </div> 
     <div class="back"> 
      <!-- back content --> 
     </div> 
    </div> 
</div> 

<script> 
    jQuery(".flip-container").hover(function() { 
     jQuery(this).addClass("hover"); 
    },function() { 
     jQuery(this).delay(2000).queue(function(){ 
      jQuery(this).removeClass("hover"); 
     }); 
    }); 
</script> 

<style> 
    .flip-container.hover .flipper { 
     transform: rotateY(180deg); 
    } 

    .flipper { 
     transition: 0.6s; 
     transform-style: preserve-3d; 
     position: relative; 
    } 
</style>

這工作，但有時級「懸停」不除，它停留，留下它的動畫狀態的元素。任何想法如何使這更可靠？

來源

2017-03-23 Ciaran Gaffey

將HTML代碼爲例 –

什麼是'.hover'的CSS？在代碼片段或http://jsfiddle.net中看到一個有效的示例將幫助您獲得一些答案 –

請閱讀[如何創建最小，完整和可驗證示例]（https://stackoverflow.com/help/） mcve）並用相關代碼更新您的問題。 – Ionut

嘗試使用mouseenter，然後設置一個超時函數來移除類，除非每次鼠標進入該區域，否則不會添加和刪除類。您可能還需要檢查，看看是否該區域已經有類以避免被執行過多次，像這樣的功能：

jQuery(".flip-container").mouseenter(function() { 
    var el = jQuery(this); 
    if(!el.hasClass("hover")){ 
     el.addClass("hover"); 
     setTimeout(function(){ 
      el.removeClass("hover"); 
     }, 2000); 
    } 
});

這裏是工作提琴Fiddle Demo

來源

2017-03-23 09:06:06

是的完美。謝謝 –

在懸停添加/刪除類 - 並不總是工作

回答

相關問題