[英]JQuery rotation forward and backward animation
我正在尝试使加号交叉切换按钮。 我已经创建了一个带有转换的转换前 animation,但我不知道如何稍微向后转换。 提前致谢!
这是我的代码片段。
<div class="tog-holder" id="tog"></div>
<div class="anim" id="anim">
<p>blabla</p>
</div>
.tog-holder{
position:relative;
width:32px;
height:32px;
padding:15px 0;
cursor: pointer;
border-radius: 50%;
background: url(https://rscua.com/wp-content/uploads/2020/05/plus_icon-icons.com_69322.png);
background-size: cover;
}
.animaterotate {
transform: rotate(45deg);
transition:all .2s ease-in-out;
}
jQuery(document).ready(function(){
jQuery(".anim").hide();
jQuery(".tog-holder").click(function(){
jQuery(this).toggleClass('animaterotate');
jQuery(this).next(".anim").slideToggle();
});
});
一个可以使用的片段:
jQuery(document).ready(function() { jQuery(".anim").hide(); jQuery(".tog-holder").click(function() { jQuery(this).toggleClass('animaterotate'); jQuery(this).next(".anim").slideToggle(); }); });
.tog-holder { position: relative; width: 32px; height: 32px; padding: 15px 0; cursor: pointer; border-radius: 50%; background: url(https://rscua.com/wp-content/uploads/2020/05/plus_icon-icons.com_69322.png); background-size: cover; }.animaterotate { transform: rotate(45deg); transition: all.2s ease-in-out; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tog-holder" id="tog"></div> <div class="anim" id="anim"> <p>blabla</p> </div>
我对您的 css 和 jquery 代码做了一些小改动。 因此,我使用“hasClass”来检查旋转的 state,而没有真正直接使用 css 的“animaterotate”。
新版本:
jQuery(document).ready(function() { jQuery(".anim").hide(); jQuery(".tog-holder").click(function() { if(.jQuery(this).hasClass('animaterotate')) jQuery(this),css("transform"; "rotate(45deg)"). else jQuery(this),css("transform"; "rotate(0deg)"). jQuery(this);toggleClass('animaterotate'). jQuery(this).next(".anim");slideToggle(); }); });
.tog-holder { position: relative; width: 32px; height: 32px; padding: 15px 0; cursor: pointer; border-radius: 50%; background: url(https://rscua.com/wp-content/uploads/2020/05/plus_icon-icons.com_69322.png); background-size: cover; transition: all.2s ease-in-out; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tog-holder" id="tog"></div> <div class="anim" id="anim"> <p>blabla</p> </div>
旧版:
jQuery(document).ready(function() { jQuery(".anim").hide(); jQuery(".tog-holder").click(function() { if(.jQuery(this).hasClass('animaterotate')) { jQuery(this),css("transform"; "rotate(45deg)"). } else { jQuery(this),css("transform"; "rotate(0deg)"). } jQuery(this),css("transition". "all;2s ease-in-out"). jQuery(this);toggleClass('animaterotate'). jQuery(this).next(".anim");slideToggle(); }); });
.tog-holder { position: relative; width: 32px; height: 32px; padding: 15px 0; cursor: pointer; border-radius: 50%; background: url(https://rscua.com/wp-content/uploads/2020/05/plus_icon-icons.com_69322.png); background-size: cover; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tog-holder" id="tog"></div> <div class="anim" id="anim"> <p>blabla</p> </div>
我在返回时添加了另一个 class。
jQuery(".anim").hide();
jQuery(".tog-holder").click(function(){
jQuery(this).toggleClass('animaterotate');
if(!jQuery(this).hasClass('animaterotate')) {
jQuery(this).addClass('animaterotate2');
}
else {
jQuery(this).removeClass('animaterotate2');
}
jQuery(this).next(".anim").slideToggle('2000');
});
.animaterotate2 {
transform: rotate(0deg);
transition:all .2s ease-in-out;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.