jQuery - 隐藏 div，然后在点击时显示答案

【问题标题】：jQuery - hide div, then show on clickjQuery - 隐藏 div，然后在点击时显示
【发布时间】：2013-03-17 18:50:23
【问题描述】：

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

有什么想法吗？

【问题讨论】：

.slideToggle() 只是动画元素的高度。您可能想使用.animate() 来更改元素的位置。
请不要在编辑时删除您的初始请求

标签： javascript jquery

【解决方案1】：

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

【讨论】：

谢谢。我仍然不完全确定回调函数是什么；我是 jQuery 的新手。我拥有的新代码如下，但它没有按应有的动画效果。 $(document).ready(function() { $(".thestuff").click(function() { $(".slide").animate("{height": "150px"}, "slow"); }); });
如果你想移动你的div，那么你应该用一个负数来设置margin，比如animate({ marginTop: '-150px'}, slow);，这会让你的div向上移动150px。回调函数基本上是动画完成时调用的函数。 jQuery animate() 有一个名为complete 的属性，用于处理回调。您可以在api.jquery.com/animate 阅读有关该主题的更多信息

【解决方案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);
        }
    });
});

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

【讨论】：

感谢 G3z。我在答案中发布了一个 jsfiddle，你能告诉我为什么使用你发布的代码而不是 jsfiddle 中的代码更好吗？我是 jQuery 新手，想尽可能多地了解/学习。
正如 j08691 指出的那样，slideToggle() 会调整元素的高度，而我知道您想移动元素。我的代码不是“更好”，它只是输出不同的不同。如果您可以调整大小，则您的代码没有问题
好的，非常感谢您的帮助，非常感谢。

【解决方案3】：

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

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

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

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

【讨论】：

感谢您的回答，会试一试！我很好奇为什么我上面发布的代码也能正常工作 - 有什么理由我应该在我发布在 jsfiddle 中的 slideToggle() 上使用动画？
slideToggle() 使元素挤压成空。所以如果它从 400px 高开始，那么它会逐渐压缩到 0px 高。如果这是想要的效果，那就去做吧。 jsfiddle.net/Dtwigs/wJfDr 看看是不是你想要的。如果不能帮助我了解您的目的，我会提供帮助。
嗨，丹，这个想法是简单地滑动打开 div，然后在按下表单中的提交按钮后将其关闭。显然，在这种情况下，slideToggle() 只会用于单击一次 - 考虑到这一点，你能告诉我，我使用你的代码还是我在 jsfiddle 中发布的代码更好？非常感谢！
哦，使用 slideToggle() 。你走在正确的轨道上。对不起，我对所有这些其他答案感到困惑。以为你在寻找别的东西。干杯。（附：我认为您的 jsFiddle 已从问题中删除）
嗨，丹，jsfiddle 在我发布给我自己的问题的答案中。我希望也许你能帮助我更多。我已经添加了我在 jsfiddle 中提到的代码并添加了一个新的 div，slidecontain，这绝对是位置。但是，现在，当我单击“单击以幻灯片”时，它会在单击以幻灯片按钮上方打开幻灯片 div。见odesk.n8geeks.com（上面的部分很丑，我知道，那会改变哈哈）。

【解决方案4】：

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

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

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

【讨论】：