jquery创建下推div效果答案

【问题标题】：Jquery to create a pushdown div effectjquery创建下推div效果
【发布时间】：2012-04-02 11:09:34
【问题描述】：

我正在尝试构建类似于此站点的功能。在点击“它是如何工作的”链接时，它会按下带有一些营销材料的 div：

https://prescreen.com/?ui=logo

想知道你是否有关于我可以用于此效果的 jQuery 的线索。

【问题讨论】：

你在哪里看到你想要的效果？
点击页面上的“工作原理”链接：prescreen.com/?ui=logo
抱歉，误读了您的问题。 slidetoggle 确实适合你。

标签： jquery css jquery-ui jquery-plugins user-interface

【解决方案1】：

来自 Prescreen 的 Dan。我帮助编写了您所指的那个漂亮的小容器。

每个人都在正确的轨道上，这很简单。这是我们用来显示和隐藏整个元素的确切过渡配置：

//show the element
element.slideDown(1800, 'easeOutBounce');

//hide the element (note we sped up the hide to get it out of users way ASAP)
element.slideUp(800, 'easeOutExpo');

见：

http://api.jquery.com/slideDown/

http://api.jquery.com/slideUp/

内部的幻灯片功能首先通过使用 CSS 属性“溢出：隐藏”设置父“容器”来完成。然后是父包装器中的一长串幻灯片，其 id 为“slideTrack”。我认为 J. Smart 最终确定了这是如何工作的。大致思路如下：

<style>
  #container {
    overflow:hidden;
  }
  .slideTrack {
    width: 10000px;
  }
  .slide {
    position: relative;
    float: left;
  }
  .slide1 {
    left: 0px;
  }
  .slide2 {
    left: 900px;
  }
  .slide3 {
    left: 1800px;
  }
</style>

<div id="container" style="overflow:hidden">
  <div id="slideTrack">
    <div class="slide" id="slide1"> slide 1 </div>
    <div class="slide" id="slide2"> slide 2 </div>
    <div class="slide" id="slide3"> slide 3 </div>
  </div>
</div>

jQuery 函数“animate”http://api.jquery.com/animate/ 用于为 CSS 过渡设置动画。使用 -= 和 += 是通过增量而不是整个值更改 css 值的便捷方法。这是我们使用的：

//move right 
$(".slide").animate({ left: '-=900px'}, 1000, 'easeOutExpo');
//move left 
$(".slide").animate({ left: '+=900px'}, 1000, 'easeOutExpo');

干杯，希望能为您节省一些时间并给您一些想法。

【讨论】：

【解决方案2】：

要扩展@Steve 的答案，您可以在.slideToggle() 函数调用中添加缓动类型，以使动画看起来好像在弹跳：

$('.toggledDiv').slideToggle('slow', 'easeOutBounce');

这需要包含 jQuery Easing 插件：http://gsgd.co.uk/sandbox/jquery/easing/

这是一个演示：http://jsfiddle.net/ANFRD/1/

【讨论】：

尝试$('.toggledDiv').stop().slideToggle('slow', 'easeOutBounce'); 以防止烦人的动画队列...
@Paulooze 当您没有为动画设置明确的结束点时，您必须小心使用.stop()。例如，如果您将.stop() 添加到我的代码中并非常快速地单击几次，则该元素将不会再扩展到它的全高，并且实际上可能会出现“损坏”。您可以通过.stop() 的实现或动画的实现来解决这个问题。
确实，谢谢！但是恕我直言，如果元素不扩展，它会比它无休止地动画更好。用户仍然可以点击“正常”，一切都会好起来的。
@Paulooze 最好的情况是，如果动画代码只是动画到两个绝对值，那么.stop() 可以顺利工作：jsfiddle.net/ANFRD/2

【解决方案3】：

使用 jQuery 的 slideToggle 功能

编辑：

这是一个如何完成的示例：jsFiddle

【讨论】：

它是否会推送页面上的所有其他 div。（这就是我想要的效果）
要确保其他内容被下推，您只需要确保 div 具有正常定位（即不是 position:absolute）。
@Abhi - 随机问题：你试过了吗？如果有，你看到了什么？成功了吗？
@Steve：嘿，史蒂夫，感谢您的建议，我尝试在这里实现：67.20.122.201/boikeno/home.php .. 但似乎不起作用.. 任何帮助将不胜感激

【解决方案4】：

JQuery UI 提供不同类型的效果并具有各种缓动选项。您可以从链接中尝试它们，我猜您正在谈论“反弹”效果。

http://jqueryui.com/demos/effect/

【讨论】：