slideToggle与min-height的成功结合
slideToggle与min-height的成功结合
提问于 2013-03-19 17:32:57
我目前在我的网站顶部有一个很好的隐藏部分，点击后就会滑下来。动画效果与slideToggle很好，但我也希望div至少覆盖窗口高度。
我已经成功地将窗口高度设置为一个变量，并更改css以反映这一点，但将其与slideToggle结合使用会使动画跳动。
jQuery(document).ready(function($) {
var win = $(window).height();
$("#hidden").css("min-height", win);
$("a#toggle").click(function() {
var txt = $("#hidden").is(':visible') ? 'Show' : 'Hide';
$("#toggle").text(txt);
$("#hidden").slideToggle(500);
});
});这是一个小提琴http://jsfiddle.net/HZACf/
如果删除jQuery的前两行，它将照常滑动。
谢谢你的帮忙!
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-03-19 21:38:44
试试animate
jQuery(document).ready(function ($) {
var $hidden = $("#hidden"),
currentHeight = $hidden.height(),
newHeight = $(window).height();
newHeight = (currentHeight > newHeight) ? currentHeight : newHeight;
$("#hidden").css("height", newHeight);
$("a#toggle").click(function () {
var txt = $("#hidden").is(':visible') ? 'Show' : 'Hide';
$("#toggle").text(txt);
$("#hidden").animate({
height : "toggle"
}, 500);
});
});我使用了animate，但您也可以使用slideToggle，因为我们现在只处理元素的height。
小提琴here
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15495760
复制相关文章
相似问题
腾讯云开发者
