動畫onClick - jquery

Question

這可能是一個愚蠢的問題，但如果你有一個函數onClick通過從display: none到display: block使模態出現，是否有可能只動畫轉換的一部分。我的意思是，當它是display:block，然後fade-out，因爲它脫離屏幕，你能「立即」出現嗎？

見段下面的例子

$(function(){ 
 
    $('.square').click(function() { 
 
    $('.modal').toggleClass('showModal'); 
 
    }); 
 
});

.square { 
 
    height: 50px; 
 
    width: 50px; 
 
    border: 1px solid; 
 
    content: ''; 
 
} 
 

 
.modal { 
 
    height: 400px; 
 
    width: 400px; 
 
    background-color: #f1f1f1; 
 
    display: none; 
 
} 
 

 
.showModal { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="square"></div> 
 
<div class="modal"></div>

Answer 1

是的，可以。只需檢查它是否顯示。如果是 - 使用動畫。如果沒有 - 即時行動。

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    if ($('#div').hasClass('active')) { 
 
     $('#div').slideUp(function() { 
 
     $('#div').removeClass('active').show(); 
 
     }); 
 
    } else { 
 
     $('#div').addClass('active'); 
 
    } 
 
    }) 
 
})

#div { 
 
    height: 0; 
 
    background-color: blue; 
 
} 
 

 
#div.active { 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Toggle</button> 
 
<div id="div"></div>

Answer 2

有可能是一個更優雅的方式，但我不會用.showModal類來做到這一點。

您可以檢查元素設置爲display: none;

• 如果是的話，你可以將元素的CSS改變display: block;
• 否則，您可以使用jQuery的fadeOut()方法，它通過設置CSS display: none設計。

嘗試下面的代碼片段：

$(function(){ 
 
    $('.square').click(function() { 
 
    if($('.modal').css('display') === 'none'){ 
 
    $('.modal').css('display', 'block'); 
 
    } else { 
 
    $('.modal').fadeOut(); 
 
    } 
 
    }); 
 
});

.square { 
 
    height: 50px; 
 
    width: 50px; 
 
    border: 1px solid; 
 
    content: ''; 
 
} 
 

 
.modal { 
 
    height: 400px; 
 
    width: 400px; 
 
    background-color: #f1f1f1; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="square"></div> 
 
<div class="modal"></div>