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

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

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

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"); 
    }); 
});

任何想法？

来源

2013-03-27 Nikki Mather

'.slideToggle（）'只是动画元素的高度。您可能想使用'.animate（）'来更改元素的位置。 – j08691 2013-03-27 15:48:55

请不要在编辑时删除最初的请求 – G3z 2013-03-27 16:56:30

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

来源

2013-03-27 15:58:00

谢谢。我仍然不完全确定回调函数是什么;我是jQuery的新手。我有的新代码是在下面，但它不会动画，因为它应该。（“。thestuff”）。click（function（）{{0} {0} {0}（“。slide”）。$（document.ready）animate（“{height”：“150px”}，“slow”）; }）; }）; – 2013-03-27 16:01:17

如果你想移动你的div，那么你应该用一个负数动画边距，比如'animate（{marginTop：'-150px'}，slow）;'，这会使你的div向上移动150px。回调函数基本上是一个在动画完成时调用的函数。 jQuery animate（）有一个属性，名为'complete'来处理回调。你可以在http://api.jquery.com/animate/ – 2013-03-27 18:16:12

正如你被告知你应该使用.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但是这取决于你

来源

2013-03-27 16:37:02 G3z

上阅读更多的主题。谢谢G3z。我在回答中发布了一个jsfiddle，你能告诉我为什么使用你发布的代码而不是jsfiddle中的代码更好？我是jQuery的新手，希望尽可能多地了解/学习。 – 2013-03-27 16:43:21

正如j08691指出的那样，slideToggle（）调整元素的高度，但我没有说明你想移动元素。我的代码不是“更好”，它只是输出一个不同的东西。如果你确定调整大小，你的代码没有问题 – G3z 2013-03-27 16:51:00

好的，非常感谢你的帮助，非常感谢。 – 2013-03-27 17:04:18

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

上面的代码将通过提高“顶级动画的DIV下来150像素“属性。然后，当它完成动画时，它会隐藏你的.slide div。

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

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

来源

2013-03-27 16:37:09 Danwilliger

谢谢你的回答，会给你一个答案！我很好奇，至于为什么我上面发布的代码工作正常 - 是否有任何理由为什么我应该使用slideToggle（）我张贴在jsfiddle上的动画？ – 2013-03-27 16:41:40

slideToggle（）使元素挤成一团。所以如果它起始于400px高，那么它会逐渐挤压到0px高。如果这是所需的效果，那就去做吧。 http://jsfiddle.net/Dtwigs/wJfDr/看看这是你想要的。如果不能帮助我理解你要做什么，我会帮忙的。 – Danwilliger 2013-03-27 16:45:45

嗨丹，想法是简单地滑动打开div，然后关闭一旦提交按钮在表单被按下。显然，在这种情况下，slideToggle（）只能用于一次点击 - 你能告诉我，考虑到这一点，如果我更好地使用你的代码或我在jsfiddle中发布的代码？非常感谢！ – 2013-03-27 17:05:51

好吧，看来我可以用slideToggle（）完成后期工作，我只需将主内容容器设置为不显示直到单击（添加显示：无; CSS）。

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

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

来源

2013-03-27 16:40:36

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

回答

相关问题