我有两列和一个位于它们中间的按钮,我尝试使用 jquery 和 animate.css 使按钮切换(最大化/最小化)两列。
做起来好像很容易,但是做的不好,只能最小化一次,只想做个拨动式的。 这是一个例子:
HTML:
<a class="btn btn-default"> Maximize/Minimize <i class="fa fa-chevron-up" aria-hidden="true"></i></a>
<div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ducimus unde quasi dolorum necessitatibus voluptates perferendis consequuntur alias inventore quisquam distinctio sunt tempora quam doloremque, molestias praesentium voluptatem, sed optio.</div>
<div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus necessitatibus excepturi ut dolorum placeat ducimus accusamus corrupti dicta mollitia enim dolore impedit pariatur, nobis dignissimos ad, magni distinctio voluptate assumenda.</div>
CSS:
body{
position: relative;
}
.btn{
display:block;
}
@keyframes slideOutDown {
to {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 200px, 0); // distance of the animation
};
@keyframes slideOutUp {
to {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, -200px, 0); // distance of the animation
}
JS:
$(".btn").click(function(){
$(".col-xs-6 , .btn").addClass('animated slideOutDown');
$(".btn i").removeClass('fa-chevron-up');
$(".btn i").addClass('fa-chevron-down');
});
我希望在最小化之后能够使用 slideOutUp
动画再次最大化。
非常感谢您的帮助。
最佳答案
你可以在这里使用toggleClass()
。目前,您正在单击添加或删除一些类,在下一次单击中您将不得不做相反的事情,您可以定义一个 if else 条件来检查何时执行哪些类,或者您可以简单地使用 toggleClass()
$(".btn").click(function(){
$(".col-xs-6 , .btn").toggleClass('animated slideOutDown');
$(".btn i").toggleClass('fa-chevron-up');
$(".btn i").toggleClass('fa-chevron-down');
});
关于javascript - 如何使用 jquery 和 animate.css 切换最大化/最小化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45513181/