jQuery：使示例平滑向下滑动答案

【问题标题】：jQuery: make the example to slide down smoothlyjQuery：使示例平滑向下滑动
【发布时间】：2012-08-07 19:07:39
【问题描述】：

我在这里有一个几乎可以工作的代码： jsFiddle.

它有什么作用？它在绿色矩形上上下滑动。这里有几个我想解决的问题，但第一个是：我希望它SMOOTHLY和一起滑下，中间没有空格，时间为 1500 毫秒。现在它可以工作 500 毫秒，当您单击向下滑动时，绿色矩形向下滑动得更快（我不明白为什么）。

另外我不想改变我的html div的结构，如果可能的话，只能添加额外的div来重写代码。

附： jQuery的其他代码几天前用于此解决方案，但在FF中滑得不好（虽然在Chrome中完美），所以它被当前的jQuery代码取代，感谢AK（jQuery - slide down instead of slide up）

【问题讨论】：

标签： jquery html css jquery-ui slide

【解决方案1】：

我不确定我是否理解你的问题，这就是你要找的吗？

jsfiddle

【讨论】：

不幸的是，没有...绿色块比链接所在的块向下滑动的速度更快...滑动时出现了一些空间...

【解决方案2】：

你没事吧？ (jsFiddle)

 $(document).ready(function ()
    {
        $('#slide-link').click(function(){

            var hid = $('#sliderWrapper').is(':hidden')            
            $(this).animate({ top: (1-hid)*($(window).height()) },1500)

            if(hid) {$('#sliderWrapper').stop().show("slide", { direction:"down" }, 2000);}
            else { $('#sliderWrapper').stop().hide("slide", { direction:"down" }, 2000); }

        })
    });

我在if-else 语句中增加了 500 超过 1500

【讨论】：

同样的事情...绿色块比链接所在的块向下滑动更快...滑动时出现一些空间...
谷歌浏览器 21.0.1180.75 m, Firefox 14.0.1
带 safari 没问题...这段代码有点乱，我正在尝试把它放在 firefox 上运行
它工作得很好:) 我的错，它有不同的速度，因为在相同的时间（500 毫秒或 1500 毫秒或任何毫秒）内，sliderWrapper 和滑动链接有不同的通过目的地。可能您的显示分辨率更高，并且所有文本都在同一页面上。这就是为什么在你的屏幕上，两个方块的速度相同，向下滑动时之间没有空间。