当前位置: 首页 > 工具软件 > AutoAnimate > 使用案例 >

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

苏华荣
2023-12-01

 实现原理:当点击展开时,获取元素height: auto的高度为多少像素,由当前高度到height:auto的过渡;反之。

var m_flag = true;
var el = $(".case-detail-con"),
	curHeight = el.height();
$("#casesdetail_more").click(function(){
  if(m_flag){
    autoHeight = el.css('height', 'auto').height();
    el.height(curHeight).stop().animate({height: autoHeight}, 500);
    $(this).find("span").html("收起");
    $(this).find("img").addClass('open');
    m_flag = false;
  }else{
    autoHeight = el.css('height', 'auto').height();
    el.height(autoHeight).stop().animate({height: curHeight}, 500);
    $(this).find("span").html("展开");
    $(this).find("img").removeClass('open');
    m_flag = true;
  }
})

 

 类似资料: