Question

我在页面顶部有1个可见的div，在代码后面有8个隐藏的div。

我希望在该可见div中有一个onClick事件，以使后续div变为可见，并从页面顶部“滑落”到最后一个div。像幻灯片一样。

到目前为止，我的代码只是将旧的div推下来而不是替换它。

    <script src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('#n2').hide();
        $('#n1A').click(function () {
            var state = $('#n2').is(':visible');
            $('#n2')[state?'hide':'slideToggle'](state ? 0 :'slow');
        });
    });
    </script>

HTML

    <div id="n1">
    <a href="#" id="n1A">...</a>
    </div>

    <div id="n2">
    <a href="#" id="n2A">...</a>
    </div>

    (and so on.  for 8 divs)

如何让每个div下降超过上一个div？
我是否需要为所有8个div提供单独的脚本代码，或者变量可以简化这个吗？
如何在动画中添加“easeOutBounce”？

感谢您的帮助。

Answer 1

这是一个应该让你开始好的例子。我只是把它们放在绝对的位置，以便它们可以相互堆叠。但是有几种不同的方法可以做到这一点。

使用类使得您不必为每个元素编写js。

JSFiddle

示例DOM：

<div id="n1" class="slide"> <a href="#" id="n1A">...1</a>

</div>
<div id="n2" class="slide"> <a href="#" id="n2A">...2</a>

</div>
<div id="n3" class="slide"> <a href="#" id="n3A">...3</a>

</div>
<div id="n4" class="slide"> <a href="#" id="n4A">...4</a>

示例javascript：

$(document).ready(function () {
    $('.slide').not("#n1").hide();
    $('.slide').click(function () {
        var $this = $(this);
        var $next = $this.next();
        if (!$next.length) {
            $next = $this.siblings(".slide").first();
        }
        $this.css("z-index","-1"); //make sure $next can slide OVER $this
        $next.slideDown("slow", function () {
            $this.hide().css("z-index","0");
        });
    });
});

更改动画类型（easeOutBounce），您可能不得不使用jQueryUI - http://api.jqueryui.com/easings/

隐藏的Div Slidedown超过可见的div

1 个答案: