Question

我正在尝试构建类似于此站点的功能。在点击“工作原理”链接时，它会使用一些营销材料推送div：

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

Answer 1

来自Prescreen的丹在这里。我帮忙写了你指的那个漂亮的小容器。

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

//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属性“overflow：hidden”的父“容器”来完成内部的幻灯片放映功能。然后在父包装器中使用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');

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

Answer 2

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

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

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

以下是演示：http://jsfiddle.net/ANFRD/1/

Answer 3

使用jQuery的slideToggle功能

编辑：

以下是如何完成的示例：jsFiddle

Answer 4

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

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

Jquery创建一个下推div效果

4 个答案: