CODEWITHSUNDEEP
javascriptjqueryjquery-animateslideshow
Penumbra
Penumbra

Reputation: 85

Simple jQuery Animate Example - Scrolling from one div to another div

Here is the example I'm looking to create...

Let's assume there are two divs, each containing some other HTML/Content (other divs). I would like to have one of these divs in the view on page load, and then after some number of seconds (let's say 5), scroll the second div onto the same place as the first div, and then repeating that process indefinitely until the user leaves the page.

The page and elements in question can be found at http://paysonfirstassembly.com/. I am attempting to animate the left sidebar with a class of dynamicPanel. There will be at least three of these divs, and they will nearly match up in content length.

I appreciate everybody's help. I am a very new client-side programmer and appreciate the respect that this community has with new developers.

Upvotes: 1

Views: 1185

Answers (1)

mVChr
mVChr

Reputation: 50177

Working demo of the following →

Here's a simple jQuery plugin I just made that will slide up the first div and place it at the end of the list. I've commented the code below to further explain so that this can just get you started and you can adjust it to your needs and learn about jQuery:

// the plugin declaration
$.fn.rotateEach = function ( opts ) {

    // cache the element set
    var $this = this,

        // create some default options
        defaults = {
            delay: 5000
        },

        // pass the defaults to settings with any override options
        settings = $.extend(defaults, opts),

        // repeated rotation function
        rotator = function ( $elems ) {

            // slide up first element in set
            $elems.eq(0).slideUp(500, function(){

                // detach first element
                var $eq0 = $elems.eq(0).detach();

                // append it to wrapper
                $elems.parent().append($eq0);

                // fade it back in
                $eq0.fadeIn();

                // call rotator on reselection of elements
                // since first element was moved to end
                setTimeout(function(){ rotator( $( $elems.selector ) ); },
                           settings.delay);
            });
        };

    // initial rotator call
    setTimeout(function(){ rotator( $this ); }, settings.delay);
};

// invoke plugin
$('.dynPanelContent').rotateEach();

If you want to change the delay you can just pass it in as an option:

$('.dynPanelContent').rotateEach({ delay: 7500 }); // 7.5 seconds

Note: I also moved .dynPanelOpener and .dynPanelTitle within .dynPanelContent so that they're included in the animations.

See working example →

Upvotes: 3

Related Questions