Question

Im looking for a jQuery alternative to this plugin:

“upPrev: NYTimes Style “Next Post” Animated Button”
http://wordpress.org/extend/plugins/upprev-nytimes-style-next-post-jquery-animated-fly-in-button/

Does anyone know if there is a non wordpress version of this? That will work with non worpress sites.

Thanks!

Answer 1

You can fiddle with a working demo of the following code here.

This type of animation is just what jQuery is built to do easily, so I don’t think you need a plugin to accomplish this. Let’s say you have a long HTML page with the following div that you want to slide out:

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

You would style this div to be in a fixed position near the bottom of the page and just off screen to the right, like so:

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

The key is to bind the window’s scroll event to fire when the scroll bar is past a certain threshold. Here’s one way to accomplish that:

$(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);
    }
});

The .not(':animated') and .stop(true,false) are to prevent quirks in the animation when scrolling fast.