这可能是个愚蠢的问题,但如果你有一个函数 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>
最佳答案
是的,你可以。只需检查它当前是否显示。如果是 - 使用动画。如果没有 - 立即采取行动。
$(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>
关于javascript - 动画 onClick - Jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46469927/