[英]How to toggle Maximize/Minimize using 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
動畫再次最大化。
非常感謝您的幫助。
你可以在這里使用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');
});
$(".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");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.