要配合CSS動畫使用slideDown方法,可以在CSS中定義動畫效果,并在slideToggle方法中傳入該動畫名稱。下面是一個示例代碼:
HTML:
<div class="box">內容</div>
<button id="toggle">點擊切換</button>
CSS:
.box {
display: none;
}
.slide-down {
animation-name: slide-down;
animation-duration: 1s;
}
@keyframes slide-down {
from {
max-height: 0;
}
to {
max-height: 200px; //根據實際需要調整高度值
}
}
JavaScript:
$('#toggle').click(function() {
$('.box').slideToggle('slow', function() {
$(this).toggleClass('slide-down');
});
});
在這個示例中,當點擊按鈕時,box元素會以slide-down動畫效果展開或收起。根據實際需求可調整動畫效果和時間。