Question

我正在寻找这个插件的jQuery替代品：

“upPrev：NYTimes Style”下一篇文章“动画按钮” http://wordpress.org/extend/plugins/upprev-nytimes-style-next-post-jquery-animated-fly-in-button/

有没有人知道是否有非wordpress版本？这适用于非worpress网站。

谢谢！

Answer 1

您可以fiddle with a working demo of the following code here.

这种类型的动画正是jQuery的构建方式，因此我不认为你需要一个插件来实现这一点。假设您有一个很长的HTML页面，其中包含您想要滑出的div：

<div id="botSlide">Hey, look at me!</div>

您可以将此div设置为靠近页面底部的固定位置，并在屏幕右侧，如下所示：

#botSlide {
    padding:20px;
    width:200px;
    position:fixed; bottom:20px; right:-240px;
}

关键是在滚动条超过某个阈值时绑定窗口的滚动事件。这是实现这一目标的一种方法：

$(window).bind('scroll', function(e) {
    var buffer = 500,
        bsPadding = 40,
        slideIn = ($(this).scrollTop() > 
                  ($('body').height() - $(window).height() - buffer)),
        $bs = $('#botSlide');

    if (slideIn) {
        $bs.not(':animated')
           .stop(true, false)
           .animate({
               'right': 0
           }, 300);
    } else {
        $bs.not(':animated')
           .stop(true, false)
           .animate({
               'right': -$bs.width() - bsPadding
           }, 300);
    }
});

.not(':animated')和.stop(true,false)用于在快速滚动时阻止动画中的怪癖。

寻找替代这个“飞入”wordpress插件

1 个答案: