jquery创建一个下推div效果

我想建立一个类似于这个网站的功能。其中，在点击“如何运作”的链接它推下来一个div一些营销材料：jquery创建一个下推div效果

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

，如果你有一个关于一个jQuery，我可以用这个效果线索疑惑。

来源

2012-03-16 Abhi

你究竟在哪里看到你想要的效果？ – 2012-03-16 22:23:34

点击页面上的“工作原理”链接：https://prescreen.com/?ui=logo – Abhi 2012-03-16 22:52:36

抱歉，误读了您的问题。 slidetoggle会适合你的确。 – 2012-03-16 23:03:29

使用jQuery的slideToggle功能

编辑：

下面是它如何工作的一个示例：jsFiddle

来源

2012-03-16 22:23:39 Steve

它会推动拥有页面上的所有其他股利。（多数民众赞成在我想要的效果） – Abhi 2012-03-16 22:51:56

为了确保其他内容被推下，你只需要确保div有正常的定位（即。不是位置：绝对）。 – 2012-03-16 23:03:05

@Abhi - 随机问题：你试过了吗？如果是这样，你看到了什么？它有用吗？ – Steve 2012-03-16 23:05:26

JQuery用户界面提供了不同类型的效果，并具有各种宽松选项。你可以从链接中尝试它们，我想你是在谈论“反弹”效应。

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

来源

2012-03-16 23:07:12 tuze

为了扩大对@史蒂夫的回答，您可以在一个宽松类型添加到.slideToggle()函数调用，以使动画看起来好像是弹跳：

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

这需要包括了jQuery缓解插件：http://gsgd.co.uk/sandbox/jquery/easing/

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

来源

2012-03-16 23:11:25 Jasper

尝试'$（ '.toggledDiv'）。stop（）。slideToggle（'slow'，'easeOutBounce'）;'为了防止恼人的动画队列...＃ – Paulooze 2012-03-16 23:24:09

@Paulooze你不得不小心使用'.stop（）'为您的动画设定明确的终点。例如，如果向我的代码中添加'.stop（）'并且几次点击非常快，则该元素不会再扩展到其全高，并且实际上可能会显示为“已损坏”。你可以通过执行'.stop（）'或通过动画的实现来解决这个问题。 – Jasper 2012-03-16 23:28:17

的确，谢谢！但是，如果元素不扩展，那么它会更好，而不是无限制地动画。用户仍然可以点击“正常”，一切都会好的。 – Paulooze 2012-03-16 23:42:43

丹从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函数“动画”，http://api.jquery.com/animate/，使用动画一个CSS过渡。使用 - =和+ =是一种方便的方法，可以通过增量而不是整个值来更改css值。这里是我们使用的：

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

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

来源

2012-03-23 04:30:48 drummel

jquery创建一个下推div效果

回答

相关问题