Простой пример jQuery Animate - прокрутка от одного div к другому div - PullRequest
Новая
       19

Простой пример jQuery Animate - прокрутка от одного div к другому div

1 голос
/ 08 мая 2011

Вот пример, который я хочу создать ...

Давайте предположим, что есть два элемента div, каждый из которых содержит некоторый другой HTML / Content (другие элементы div).Я хотел бы иметь один из этих div в представлении при загрузке страницы, а затем через некоторое количество секунд (скажем, 5) прокрутить второй div в то же место, что и первый div, и затем повторять этот процесс до бесконечности, покапользователь покидает страницу.

Страница и рассматриваемые элементы находятся по адресу http://paysonfirstassembly.com/. Я пытаюсь анимировать левую боковую панель с помощью класса dynamicPanel.Там будет по крайней мере три из этих div, и они почти совпадают по длине контента.

Я ценю помощь всех.Я очень новый клиентский программист и ценю уважение, которое это сообщество проявляет к новым разработчикам.

1 Ответ

3 голосов
/ 08 мая 2011

Рабочая демонстрация следующего →

Вот простой плагин jQuery, который я только что сделал, который сдвинет вверх первый div и поместит его в конецсписок.Я прокомментировал приведенный ниже код для дальнейшего объяснения, так что это может помочь вам начать работу и настроить его в соответствии с вашими потребностями и узнать о 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();

Если вы хотите изменить задержку, вы можете простопередайте его в качестве опции: 

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

Примечание: я также переместил .dynPanelOpener и .dynPanelTitle в .dynPanelContent, чтобы они были включены в анимацию.

См. Рабочий пример →

...