快速懸停的jQuery動畫

如果將鼠標懸停在元素上，則動畫可以正常工作。綠色層從左側重疊，然後從頂部開始，黃色層與綠色層重疊。當鼠標離開元素時，該重疊應該自動撤消，從撤消黃色重疊和綠色重疊開始。快速懸停的jQuery動畫

但是，如果光標懸停在它上面太快，動畫會卡住黃色的重疊部分，直到重新拖動鼠標，然後彈出鼠標。我已經嘗試在每個.animate方法之前添加.stop(false, true) jQuery方法，這是我閱讀的方法可以解決類似問題，但這不起作用。我試圖在.animate函數之前將它鏈接起來，我嘗試了所有函數的所有變體，以及.stop(true,true);。

如果鼠標懸停部分在光標離開元素之前沒有完成，是否有辦法阻止mouseout部分發射？

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

來源

2017-10-16 DustinL_G

用下面的溶液可以保證「鼠標輸入部分」 fullfilled後的「鼠標離開份」僅運行和（反之亦然）。

此外，該腳本照顧快速用戶操作的情況：「進入>離開>進入」狀態仍然如用戶沒有做過「快速離開」一樣。 所以實際上這應該做你想達到的（我希望至少）。

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>

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

來源

2017-10-17 02:41:50 Axel

阿克塞爾，感謝您的回覆和解釋。您的解決方案使動畫更好，並解決了我所問的問題。我現在想知道是否有一種方法，當光標離開元素時，動畫可以從剩餘的位置撤回。 –

是的@DustinL_G，這應該是可能的。我推薦閱讀[我的這個答案]（https://stackoverflow.com/a/45885132/3931192）以更好地理解JS或CSS的動畫。如果你喜歡，你可以在後續問題上給我打電話... – Axel

$("#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'); 
 
    \t $('#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>

來源

2017-10-17 03:18:55

快速懸停的jQuery動畫

回答

相關問題