我有两列和一个按钮居中在他们之间,我试图使按钮切换(最大化/最小化)与jQuery和animate.css两列。如何使用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
动画后,我将其最小化。
非常感谢您的帮助。
谢谢,但我想用'slideOutUp'动画最大化它。 – ExillustX
我不明白,不是你现在的代码最大化吗? – Dij
你的代码最大化没有动画的列,但我希望它们通过'slideOutUp'最大化,我不认为'toggleClass()'是这个正确的函数:/ – ExillustX