如何使用jquery＆animate.css切換最大化/最小化？

我有兩列和一個按鈕居中在他們之間，我試圖使按鈕切換（最大化/最小化）與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'); 
    });

Here is jsfiddle example

我希望能夠最大限度地再次使用slideOutUp動畫後，我將其最小化。

非常感謝您的幫助。

來源

2017-08-04 ExillustX

您可以在這裏使用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'); 

    });

來源

2017-08-04 18:18:49 Dij

謝謝，但我想用'slideOutUp'動畫最大化它。 – ExillustX

我不明白，不是你現在的代碼最大化嗎？ – Dij

你的代碼最大化沒有動畫的列，但我希望它們通過'slideOutUp'最大化，我不認爲'toggleClass（）'是這個正確的函數：/ – ExillustX

-1

$(".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"); 

});

來源

2017-08-07 06:05:45 yasir

如何使用jquery＆animate.css切換最大化/最小化？

回答

相關問題