jQuery動畫快速懸停

Question

如果您將鼠標緩慢懸停在元素上，則動畫將正常工作。 綠色層從左側重疊，然后，黃色層從頂部重疊綠色層。 當鼠標離開元素時，這種重疊應自行消除，首先是消除黃色重疊，然后是綠色重疊。

但是，如果光標懸停在其上的速度過快，則動畫將停留在黃色重疊處，直到您再次刪除鼠標然后將其移出鼠標為止。 我嘗試在每個.animate方法之前添加.stop(false, true) jQuery方法，這是我閱讀的文章，已糾正了類似的問題，但這沒有用。 我通過在.animate函數之前將其鏈接來進行嘗試，在所有函數上以及.stop(true,true);上都嘗試了它的幾乎所有變體.stop(true,true); 。

如果鼠標懸停部分在光標離開元素之前未完成，是否可以阻止觸發鼠標懸停部分？

 $(document).ready(function() { $('#con').hover( function() { // handlerIn $('#crossX').animate({'width': '115px'}, function() { $('#crossY').animate({'height': '115px'}) }) }, function() { // handlerOut $('#crossY').animate({'height': '15px'}, function() { $('#crossX').animate({'width': '15px'}) }) } ) }); 

 #con { position: relative; display: flex; justify-content: center; align-items: center; width: 130px; height: 130px; overflow: hidden; //background-color: black; } #one { width: 100px; height: 100px; background-color: lightgrey; color:black } #crossX { position: absolute; top: 15px; left: 0px; width: 15px; height: 100px; background-color: green; color: yellow; } #crossY { position: absolute; top: 0px; left: 15px; width: 100px; height: 15px; background-color: yellow; color: white; } #black { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; border: 15px solid black; z-index: 10; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="con"> <div id="one"></div> <div id="crossX"></div> <div id="crossY"></div> <div id="black"></div> </div> 

Answer 1

通過以下解決方案，可以確保“鼠標離開部件”僅在“鼠標進入部件”已滿時運行（反之亦然）。

此外，該腳本還應注意以下情況：在用戶快速執行操作時：“輸入>離開>輸入”，狀態保持不變，就好像用戶尚未完成“快速離開”一樣。 因此，實際上這應該做您想要實現的目標 （至少希望如此）。

 var mouseEnter = function() { // console.log('in'); sPosition = 'in'; if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseEnterIsWaiting = true; mouseEnterIsDone = false; $('#crossX').animate({'width':'115px'}, function(){ $.when($('#crossY').animate({'height': '115px'})).then(function(){sanitizeAnimation('enter')}) }) }, mouseLeave = function() { // console.log('out'); sPosition = 'out'; if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseLeaveIsWaiting = true; mouseLeaveIsDone = false; $('#crossY').animate({'height':'15px'}, function(){ $.when($('#crossX').animate({'width': '15px'})).then(function(){sanitizeAnimation('leave')}) }) }, sanitizeAnimation = function( sMode ){ if ( 'enter' == sMode ) mouseEnterIsDone = true; else mouseLeaveIsDone = true; if ( 'in' == sPosition ) { if ( mouseEnterIsWaiting ) { mouseEnterIsWaiting = false; mouseEnter(); } } else { if ( mouseLeaveIsWaiting ) { mouseLeaveIsWaiting = false; mouseLeave(); } } }, mouseEnterIsDone = true, mouseLeaveIsDone = true, mouseEnterIsWaiting = false, mouseLeaveIsWaiting = false, sPosition = 'out'; $(document).ready(function(){ $('#con').hover(mouseEnter, mouseLeave); }); 

 body { padding: 5%; } #con { position: relative; display: flex; justify-content: center; align-items: center; width: 130px; height: 130px; overflow: hidden; //background-color: black; } #one { width: 100px; height: 100px; background-color: lightgrey; color:black } #crossX { position: absolute; top: 15px; left: 0px; width: 15px; height: 100px; background-color: green; color: yellow; } #crossY { position: absolute; top: 0px; left: 15px; width: 100px; height: 15px; background-color: yellow; color: white; } #black { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; border: 15px solid black; z-index: 10; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="con"> <div id="one"></div> <div id="crossX"></div> <div id="crossY"></div> <div id="black"></div> </div> 

如果您需要進一步的解釋，請隨時發表評論

Answer 2

 $("#con").mouseenter(function() { $('body').addClass('Hover'); $('#crossX').stop().animate({'width':'115px'},500, function(){ $('#crossY').stop().animate({'height': '115px'},500); }); }); $("body").mouseenter(function() { $('body').addClass('Hover'); $('#crossY').stop().animate({'height':'0px'},500,function(){ $('#crossX').stop().animate({'width':'0px'},500); }); }); 

 #con { position: relative; display: flex; justify-content: center; align-items: center; width: 130px; height: 130px; overflow: hidden; //background-color: black; } #one { width: 100px; height: 100px; background-color: lightgrey; color:black } #crossX { position: absolute; top: 15px; left: 0px; width: 15px; height: 100px; background-color: green; color: yellow; } #crossY { position: absolute; top: 0px; left: 15px; width: 100px; height: 15px; background-color: yellow; color: white; } #black { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; border: 15px solid black; z-index: 10; } body{ background-color:#dcdcdc; height:500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="con"> <div id="one"></div> <div id="crossX"></div> <div id="crossY"></div> <div id="black"></div> </div> </body>