有没有可能将div向上滑动(关闭它),但不完全关闭?
我的意思是,向上滑动但保留一小部分div显示出来,这可行吗?
提前感谢, mem
可能类似这样的东西可以运作:
$("#div").toggle(
function(){
$("#div").animate( { height:"500px" }, { queue:false, duration:500 });
},
function(){
$("#div").animate( { height:"50px" }, { queue:false, duration:500 });
});
不必使用500px
,可以直接使用
30px
是隐藏时要显示的大小。
这里有一个fiddle示例,如果在变量中声明了不同的高度,它也可以允许不同的高度。并且在动画后淡出也不应该成为问题。
http://jsfiddle.net/Skooljester/HdQSX/
var divTest = $("#test").height();
$("#test").toggle(
function(){
$("#test").animate({ height: divTest + 'px' }, { queue: false, duration: 500 });
},
function(){
$("#test").animate({ height:'50px' }, { queue: false, duration: 500 });
});
#test {
display: block;
background: #FF0000;
height: 500px;
width: 300px;
}
<div id="test">Test</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
.expandable {
max-height: 3em;
overflow: hidden;
transition: max-height .3s;
}
$(.someSelector).css('max-height', expandedHeight);
然后再次点击时删除样式:
$(.someSelector).attr('style', '');
$("#test").toggle(
function(){
$("#test").css('height', 'auto').hide().slideDown('fast');
},
function(){
$("#test").animate( { height:'50px' }, { queue:false, duration:500 });
});