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布局的工作原理。您已将容器高度限制为100px（溢出“隐藏”），然后使用绝对定位显示“打开”按钮，使其完全覆盖应该打开的“抽屉”。您还可以设置高度，顶部和底部属性的动画，但如果您还要明确设置高度，则明确设置顶部和底部没有意义。您还将抽屉的顶部设置为-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>

为什么我无法打开/关闭带有动画的多个div？

1 个答案: