jquery - 为什么我不能用 animate 打开/关闭多个 div？

Question

所以我的代码遇到了一些问题。

预期会发生什么: - 用户点击“打开”= 幻灯片放映“内容”。 - 用户再次点击“打开”= 隐藏“内容”。

我希望这适用于多个实例。 (它在一个实例中有点移动)但现在我无法......

1.) 打开/关闭 和 2.) 使用多个实例。

我做错了什么？ :\

$(document).ready(function(){
    $("#id_open_button").click(function(){
        var layer = $("#id_faded_layer");
        var hiddenButtons = $('#id_open');
        layer.animate({
            bottom: 0,
            height: '7em',
            top: '-97px'
        });
        hiddenButtons.css('display','block');
    });
});

Fiddle here展示我正在使用的东西。

提前致谢，感谢您的帮助。

Answer 1

基本上，您似乎不太了解 HTML 布局的工作原理。您已将容器高度限制为 100 像素(溢出“隐藏”)，然后使用绝对定位显示“打开”按钮，使其完全覆盖应该打开的“抽屉”。您还设置了高度、顶部和底部属性的动画，但如果您还打算显式设置高度，则显式设置顶部和底部没有意义。您还将抽屉的顶部设置为 -97px，将高度设置为 7em(几乎肯定小于 97px)，因此它完全呈现在 div 之外(在可见的上方和上方)。

你把这个设计严重地过度复杂化了。我建议您从更简单得多的事情重新开始。

我已经重写了一些 HTML/CSS 并让它工作得很好，虽然我不知道你的最终目标是什么。

$(document).ready(function(){
  	$("#id_open_button").click(function(){
		var layer = $("#id_faded_layer");
		var hiddenButtons = $('#id_open_hidden');
		layer.animate({
			height: '200px'
        });
        hiddenButtons.css('display','block');
	});
});

.faded {
    overflow: hidden;
    height: 0;
    background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(21, 20, 20, 0.37) 100% );
    background-image: -moz-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(21, 20, 20, 0.37) 100% );
    background-image: -o-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(21, 20, 20, 0.37) 100% );
    background-image: linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(21, 20, 20, 0.37) 100% );
    background-image: -ms-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(21, 20, 20, 0.37) 100% );
}

.prompt{
    top: 0; 
    padding: 8px; 
    font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="">
    <div class="columns three image">
        <div class="faded" id="id_faded_layer">
            <div id="id_open">
                <a>Show content</a>
            </div>
        </div>
        <div class="prompt">
            <a id="id_open_button" style="">Open</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>
<div>
    <div class="columns three image">
        <div class="faded" id="id_faded_layer">
            <div id="id_open">
                <a>Show content</a>
            </div>
        </div>
        <div class="prompt">
            <a id="id_open_button" style="">Open</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>