Question

我有两个列和一个位于它们之间的按钮，我试图通过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');
    });

Here is jsfiddle example

我希望能够在最小化动画后使用 slideOutUp 动画再次最大化。

非常感谢您的帮助。

Answer 1

您可以在此处使用toggleClass()。目前，您在点击时添加或删除某些类，在下一次单击时您必须反向执行，您可以定义if else条件以检查要执行的操作，或者您只需使用{{1 }}

toggleClass()

Answer 2

$(".btn").click(function() {

    $(".col-xs-6 , .btn").toggleClass("animated slideOutDown");

    $(".btn i").toggleClass("fa-chevron-up fa-chevron-down");

    $(".col-xs-6 , .btn").addClass("animated slideInUp");

});

如何使用jquery＆amp;来切换最大化/最小化animate.css？

2 个答案: