如何在jQuery中使用切换动画()方法
如何在jQuery中使用切换动画()方法
提问于 2022-10-30 06:22:20
我使用jQuery动画()方法创建了一个简单的动画。
简单地说，当我点击按钮，棕色的盒子是动画，然后我再次点击它，它应该反转动画(重置框的位置)。
单击按钮时，动画会正常进行，但重置过程不起作用。
我可以知道是否有一种同时使用切换()和动画()的方法吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="Style.css">
<title>Document</title>
</head>
<body>
<div class="squre"></div>
<div class="main"><h2>Click Me</h2></div>
<script src="attion.js"></script>
</body>
</html>body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: tan;
gap: 20px;
}
.main{
text-align: center;
height: 50px;
width: 200px;
cursor: pointer;
border: 1px solid black;
}
.squre{
width: 200px;
height: 200px;
background-color: brown;
position: relative;
left: -200px;
} $(document).ready(()=>{
$('.main').click(()=>{
$('.squre').animate({
left: '200px',
rotate:'300deg',
width: '20',
height: '20',
},500)
})
})我使用jQuery动画()方法创建了一个简单的动画。
简单地说，当我点击按钮，棕色的盒子是动画，然后我再次点击它，它应该反转动画(重置框的位置)。
单击按钮时，动画会正常进行，但重置过程不起作用。
我可以知道是否有一种同时使用切换()和动画()的方法吗？
回答 1
Stack Overflow用户
发布于 2022-10-30 06:39:17
我们可以使用全局变量来存储当前状态，每次单击时，如果将检查变量以确定动画或重置。
没有toggle的测试代码
$(document).ready(()=>{
let animated = false
$('.main').click(()=>{
let params = {}
if(animated){
animated = false
params = {
width: '200px',
height: '200px',
'background-color': 'brown',
'position': 'relative',
left: '-200px',
rotate:'-180deg'
}
}else{
animated = true
params = {
left: '200px',
rotate:'300deg',
width: '20',
height: '20',
}
}
$('.squre').animate(params,500)
})
})body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: tan;
gap: 20px;
}
.main{
text-align: center;
height: 50px;
width: 200px;
cursor: pointer;
border: 1px solid black;
}
.squre{
width: 200px;
height: 200px;
background-color: brown;
position: relative;
left: -200px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="Style.css">
<title>Document</title>
</head>
<body>
<div class="squre"></div>
<div class="main"><h2>Click Me</h2></div>
<script src="attion.js"></script>
</body>
</html>
注意:如果您使用的是旧版本的jQuery(在1.9下)，那么拨动法可能是一个更好的选择，如果您想要模拟toggle，可以在jquery-切换-事件-不推荐-使用什么？上检查
用toggle测试代码
$(document).ready(()=>{
$('.main').toggle(function(){
$('.squre').animate({
left: '200px',
rotate:'300deg',
width: '20',
height: '20',
},500)
},function(){
$('.squre').animate({
width: '200px',
height: '200px',
'background-color': 'brown',
'position': 'relative',
left: '-200px',
rotate:'-180deg'
},500)
})
})body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: tan;
gap: 20px;
}
.main{
text-align: center;
height: 50px;
width: 200px;
cursor: pointer;
border: 1px solid black;
}
.squre{
width: 200px;
height: 200px;
background-color: brown;
position: relative;
left: -200px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="Style.css">
<title>Document</title>
</head>
<body>
<div class="squre"></div>
<div class="main"><h2>Click Me</h2></div>
<script src="attion.js"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74250969
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号