更新小提琴:http://jsfiddle.net/zQLQV/
我正在编写此脚本以制作内容旋转器。首先,我有所有幻灯片来获取它们的默认高度,然后将它们设置为0高度。在触发器单击时(使用带有幻灯片ID的href),所有打开的幻灯片将转到高度0,触发的幻灯片将设置为自动高度。
一切都按计划进行,不包括自动高度。无论其中的内容量如何,所有幻灯片都保持在0高度。唯一的可见度是最小高度850。
任何帮助都将不胜感激。
$(function() {
$(".slide").each(function() {
slideHeight = $(this).height();
});
$(".slide").css({ "height": "0", "opacity": "0"});
$(".side-nav ul li a").click(function(event) {
event.preventDefault();
currentHref = $(this).attr('href');
$(".slide").stop().animate({"opacity": "0", "height": "0px", "min-height": "0px"}, 100);
$(currentHref).stop().animate({"opacity":"1", "min-height": "850px", height: slideHeight + "px"}, 450);
});
});
答案 0 :(得分:0)
我相信你的问题在这里:
$(".slide").each(function() {
slideHeight = $(this).height();
});
正在发生的事情是你的slideHeight
变量只被设置为最后一张幻灯片的高度。如果您将最短的幻灯片移动到列表中的最后一个位置,您会看到其他幻灯片内容被切断。
我updated your fiddle将每个幻灯片的高度存储在幻灯片本身的数据属性中。
<强> HTML:强>
<div class="side-nav">
<ul>
<li><a href="#one-slide">1</a></li>
<li><a href="#two-slide">2</a></li>
<li><a href="#three-slide">3</a></li>
</ul>
</div>
<div class="slide" id="one-slide">asdf<br>asdf<br>asdf<br>asdf<br></div>
<div class="slide" id="two-slide">asdf<br>asdf<br>asdf<br></div>
<div class="slide" id="three-slide">asdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdf<br></div>
<强>使用Javascript:强>
$(function() {
$(".slide").each(function() {
$(this).data('slideHeight', $(this).height());
});
$(".slide").css({ "height": "0", "opacity": "0"});
$(".side-nav ul li a").click(function(event) {
event.preventDefault();
var targetContainer = $($(this).attr('href'));
currentHref = $(this).attr('href');
$(".slide").stop().animate({"opacity": "0", "height": "0px"}, 100);
targetContainer.stop().animate({"opacity":"1", height: targetContainer.data('slideHeight') + "px"}, 450);
});
});