gpt4 book ai didi

javascript - 当我将鼠标悬停在其中的 上时按钮变得疯狂(使用 jQuery 动画)

转载 作者:太空宇宙 更新时间:2023-11-04 08:06:51 25 4
gpt4 key购买 nike

所以我有这个按钮,当我将鼠标悬停在它上面时我想改变宽度并使用其他一些效果,无论如何当我将鼠标悬停在它上面时按钮开始变得疯狂,它开始变宽然后崩溃,即使我没有鼠标关闭它。这是代码:

$("body").ready(function(){
var w = $(".smthnbox").css("width");
$(".smthnbox").mouseover(function(){
$(".smthnbox").animate({
width:"200px"
},400);
});

$(".smthnbox").mouseout(function(){
$(".smthnbox").animate({
width: w
},400);
});
});
*{
margin:0;
padding:0;
box-sizing: border-box;
}

.smthnbox{
width:30px;
height:30px;
background: blue;
margin:20px auto;
display:block;
}
<!doctype html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/34f0dfa89d.js"></script>
<link href="smthn.css" type="text/css" rel="stylesheet"/>
<title>Welcome | Check it out !</title>
</head>

<body>
<button class="smthnbox">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</button>
<script src="smthn.js"></script>
</body>

最佳答案

您需要在下一个之前停止上一个未完成的动画。

$(".smthnbox").stop().animate({...});

关于javascript - 当我将鼠标悬停在其中的 <i> 上时按钮变得疯狂(使用 jQuery 动画),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46555089/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com