0

所以我有一个 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");
    });
});

有任何想法吗？

4

4 回答 4

1

正如你被告知的那样，你应该使用 .animate()。
我在这里做了一个简单的例子。
这是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);
        }
    });
});

你也可以使用 opacity 代替 z-index 但这取决于你

于 2013-03-27T16:37:02.930 回答
1 
    $(".slide").animate(
        { top: "+=150" }, 
        1000, 
        function () {
            $(this).hide();
        }
    );

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

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

edit2：哦，还要确保 .slide 将属性“位置”设置为“相对”。

于 2013-03-27T16:37:09.047 回答
1

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

于 2013-03-27T15:58:00.207 回答
-1

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

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

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

于 2013-03-27T16:40:36.490 回答