Jquery创建一个下推div效果

Question

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

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

想知道你是否有关于我可以用于此效果的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');

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