jquery 通过animate实现height: auto展开收缩过渡动画 height:auto过渡动画 animate

当点击展开时,获取元素height: auto的高度为多少像素,判断布尔值,由当前高度到height:auto的过渡或由height:auto到设置高度的过渡;
需要引进jquery;

  1. javascript
 filter();
    function filter(){
   
        var xbool=[true,true,true];//定义数组 存放布尔值情况
        $('.more').click(function(){
   //展开按钮 绑定点击事件
            var index=$(this).parent().index();//根据父级的index知道点击的哪儿个 避免相互影响
            var $dl=$(this).siblings('dl');
            var curHeight =45;//获取设定的height值
            var autoHeight=$dl.css('height','auto').height();//获取height为auto的值
            if(xbool[index]){
   //判断对应的 布尔值 避免相互影响
                $dl.height(curHeight).animate({
   "height": autoHeight}, 300);
                xbool[index]=false;//改变对应的 布尔值 避免相互影响
            }
            else{
   
                $dl.height(autoHeight).animate({
   "height": curHeight}, 300);
                xbool[index]&#
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值