大家晚上好。对于英语不好，我事先表示歉意。最近，我遇到了一个无法解决的问题。 jQuery的文档未提供必要的信息，或者我只是愚蠢。
我有几个动画应根据以下原则工作：如果鼠标光标在屏幕的上半部分，则出现按钮；如果在底部，则消失。我的逻辑原来不起作用，因此该条件仅在进入/重新加载页面后才起作用。也就是说，动画不是动态执行的代码：
$.fn.offsetAnimate=()=>{
$('#body').mousemove(e=>{
let offset=$('#body').offset();
let mouseY=(e.pageY-offset.top);
mouseY<=$('#body').height()/2?$.fn.fadeInTest():$.fn.fadeOutTest()
})
}
这是我的逻辑。那是我的自定义动画（2）：
`$.fn.fadeOutTest=()=>{
$('.button').animate({
'width':'100px'
},1000,()=>{
})
console.log('check')
}`
$.fn.fadeInTest=(elem)=>{
$('.button').animate({
'padding':'0',
'width':'0%',
'transition':"all .3s linear"
},1600)
console.log('test')
}
我想指出，移动鼠标时总是会调用控制台中的值，但是样式本身仅更改一次。我将不胜感激。谢谢
尝试此操作以防止动画堆积。我还修复了您的代码中的一些语法错误
$.fn.offsetAnimate=()=>{
$('#body').mousemove(e=>{
let offset=$('#body').offset();
let mouseY=(e.pageY-offset.top);
mouseY<=$('#body').height()/2?$.fn.fadeInTest():$.fn.fadeOutTest()
})
}
$.fn.fadeOutTest=()=>{
if (!$('.button').hasClass('fade-out')){
$('.button').removeClass('fade-in').addClass('fade-out');
$('.button').animate({
'width':'100px'
},1000)
}
}
$.fn.fadeInTest=()=>{
if (!$('.button').hasClass('fade-in')){
$('.button').removeClass('fade-out').addClass('fade-in');
$('.button').animate({
'padding':'0',
'width':'0%',
'transition':"all .3s linear"
},1600)
}
}
$.fn.offsetAnimate();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body id="body" style="height: 100vh">
<button class="button" styld="width: 0px">test</button>
</body>
</html>