Question

所以我有一个div，我想在点击箭头时从另一个div后面向下滑动 - 然后在单击一个表单按钮后再次隐藏。我可以编写大部分内容，但是我不明白如何从视图中隐藏div，然后使用slideToggle将其下拉。

编辑：正如下面的人所建议的那样（感谢），事实证明，slideToggle（）不是我需要的，而是animate（） - 下面的代码似乎不起作用，我添加了一个链接jQuery UI但仍然没有。

HTML

    <div class="schedule">
        <div class="scheduletop">
            <a href="/"><img src="/images/audit.png"></a>
        </div><!-- .scheduletop -->
        <div class="schedulebottom">
            <?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?>
        </div><!-- .schedulebutton -->
        <div class="thestuff">
            <h3>TEST!</h3>
        <div class="slide">
            CLICK TEST TO SLIDE
        </div><!-- .slide -->
        </div><!-- .thestuff -->
    </div><!-- .schedule -->

的jQuery

$(document).ready(function() {
$(".slide").click(function() {
        $(".thestuff").animate({"down": "150px"}, "slow");
    });
});

有什么想法吗？

Answer 1

slideToggle()不是您在这种情况下应该使用的功能。它只会改变匹配元素的高度，而另一方面.animate()方法可以将div移动到所需的方向，但是当动画结束时它不会隐藏元素，所以你应该使用如果你想实现那个回调。如果要将div放在另一个div后面，则应使用z-index css属性。

Answer 2

正如你被告知你应该使用.animate（）我做了一个简单的例子here 这是js代码

$(document).ready(function () {
    $(".thestuff").click(function () {
        $el = $(this).find(".slide");
        if (!$el.data('up')) {
            var h3Margin = parseInt($(this).children().eq(0).height(), 10);
            var margin = "-" + ($el.height() + h3Margin) + "px";
            $el.css("z-index", -10);
            $el.animate({
                "margin-top": margin
            });
            $el.data('up', true);
        } else {
            $el.animate({
                "margin-top": 0
            }, {
                complete: function () {
                    $el.css("z-index", 1);
                }
            });

            $el.data('up', false);
        }
    });
});

您也可以使用不透明度而不是z-index，但这取决于您

Answer 3

    $(".slide").animate(
        { top: "+=150" }, 
        1000, 
        function () {
            $(this).hide();
        }
    );

上面的代码会通过增加“top”属性来将div设置为150px。然后，当它完成动画时，它将隐藏你的.slide div。

编辑：那里的“1000”说，需要1秒才能完成动画。

edit2：哦，还要确保.slide的属性“position”设置为“relative”。

Answer 4

好吧所以看起来我可以通过slideToggle（）来实现我正在寻找的东西，我只需要将主要内容容器设置为在点击之前不显示（添加display：none;到CSS）。

$(document).ready(function() {
$(".slide").click(function() {
    $(".thestuff").slideToggle("slow");
    });
});

对于可能尝试查找类似解决方案的任何人，请查看jsfiddle

jQuery - 隐藏div，然后点击显示

4 个答案: