阅读量:2
要配合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动画效果展开或收起。根据实际需求可调整动画效果和时间。