使JQuery自动滚动

Question

I have set the following HTML:

    <div id="minifrontpage-444" class="minifrontpage-tabbed-fade-in-out">
    <div class="minifrontpageid" style="table-layout: fixed; width: 100%; padding: 0px ! important; margin: 0px ! important; height: 154px;">
        <div class="anim">
        <div style="position:relative;" class="anim-div">
                                <div style="padding: 0px ! important; margin: 0px ! important; display: table; width: 100%; position: absolute;" class="animate activex">
                    <div style="display:table-row;width:100%" class="mfp-table-row">
                            <div style="display:table-cell;width:100%;word-wrap:break-word !important" class="mfp-table-cell">
                    <div class="mfp-table-cell-inner">
                    <h2><a href="/devfwdp.co.uk/index.php?option=com_content&amp;view=article&amp;id=42:lorem-ipsum&amp;catid=13:news&amp;Itemid=101">Lorem ipsum</a></h2><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum massa.
    </p><div class="clrfix"></div>              </div>
                </div>
                        </div>

            </div>                          <div style="padding: 0px ! important; margin: 0px ! important; display: none; width: 100%; position: absolute;" class="animate">
                    <div style="display:table-row;width:100%" class="mfp-table-row">
                            <div style="display:table-cell;width:100%;word-wrap:break-word !important" class="mfp-table-cell">
                    <div class="mfp-table-cell-inner">
                    <h2><a href="/devfwdp.co.uk/index.php?option=com_content&amp;view=article&amp;id=43:lorem-ipsum-2&amp;catid=13:news&amp;Itemid=101">Lorem ipsum (2)</a></h2><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum massa.
    </p><div class="clrfix"></div>              </div>
                </div>
                        </div>

            </div>          </div>
        </div>
    </div>
    <div id="mfptabs"><ul><li class="activex"><span>1</span></li><li><span>2</span></li></ul><div class="clr">&nbsp;</div></div>
    </div>

This is a news scroller, with a 'Next' and 'Previous' button. I want to be able to have the news scroller rotate automatically, where as currently it's only manually when the buttons are pressed.

I've got the following jQuery, which works great:

    jQuery(document).ready(function(){
        jQuery('.minifrontpage-tabbed-fade-in-out').each(function(){
            var theId = jQuery(this).attr('id');

            var mfpElement = jQuery('#'+theId+' .animate');
            var mfpElementLength = mfpElement.length;

            if(mfpElementLength>1){
                var addto = '<ul>';
                for(var i=0;i<mfpElementLength;i++){
                    addto += '<li><span>'+ (i+1) + '</span></li>';
                }
                addto += '</ul>';
                addto += '<div class="clr">&nbsp;</div>';
                jQuery(addto).appendTo('#'+theId+' #mfptabs');
            }

            mfpElement.hide();
            jQuery('#'+theId+' .animate:first').show();
            jQuery('#'+theId+' .animate:first').addClass('activex');
            jQuery('#'+theId+' #mfptabs li:first').addClass('activex');
            mfpElement.css('position','absolute');
            //mfpElement.css('width',mpfAnimateDiv+'%');
            jQuery('#'+theId+' .minifrontpageid').css('height', jQuery('.animate:first').css('height'));

            jQuery('#'+theId+' #mfptabs li').live('click', function(){ 
                var current = jQuery('#'+theId+' #mfptabs li.activex').index();
                var index = jQuery(this).index();
                if( current != index ){
                    jQuery('#'+theId+' #mfptabs li.activex').removeClass('activex');
                    jQuery(this).addClass('activex'); 

                    jQuery('#'+theId+' .minifrontpageid').animate({
                        height: jQuery(mfpElement[index]).css('height')
                    },
                    {
                        step: function(now, fx) {
                            jQuery(mfpElement[current]).fadeOut();
                            jQuery(mfpElement[index]).fadeIn();
                        }
                    });
                }
                return false;
            });
        });
        });

I am trying to make it autoscroll, so I have tried using the following code, but it's not working:

    function tick(){
        $('.animate:first').slideUp( function () { $(this).appendTo($('.animate')).slideDown(); });
    }
    setInterval(function(){ tick () }, 500);

How can I set it to automatically scroll on page load?

Answer 1

Solve this using example. In my job i use only 3 slides. I created one function to help and call in trigger:

jQuery(document).ready(function(){
jQuery('.minifrontpage-tabbed-fade-in-out').each(function(){
    var theId = jQuery(this).attr('id');

    var mfpElement = jQuery('#'+theId+' .animate');
    var mfpElementLength = mfpElement.length;

    if(mfpElementLength>1){
        var addto = '<ul>';
        for(var i=0;i<mfpElementLength;i++){
            addto += '<li><span>'+ (i+1) + '</span></li>';
        }
        addto += '</ul>';
        addto += '<div class="clr">&nbsp;</div>';
        jQuery(addto).appendTo('#'+theId+' #mfptabs');
    }

    mfpElement.hide();
    jQuery('#'+theId+' .animate:first').show();
    jQuery('#'+theId+' .animate:first').addClass('activex');
    jQuery('#'+theId+' #mfptabs li:first').addClass('activex');
    mfpElement.css('position','absolute');
    //mfpElement.css('width',mpfAnimateDiv+'%');
    jQuery('#'+theId+' .minifrontpageid').css('height', jQuery('.animate:first').css('height'));

    jQuery('#'+theId+' #mfptabs li').live('click', function(){ 
        var current = jQuery('#'+theId+' #mfptabs li.activex').index();

        var index = jQuery(this).index();
        if( current != index ){
            jQuery('#'+theId+' #mfptabs li.activex').removeClass('activex');
            jQuery(this).addClass('activex'); 


            jQuery('#'+theId+' .minifrontpageid').animate({
                height: jQuery(mfpElement[index]).css('height')
            },
            {
                step: function(now, fx) {
                    jQuery(mfpElement[current]).fadeOut();
                    jQuery(mfpElement[index]).fadeIn();
                }
            });
        }
        return false;
    });
});


function teste(par) {

    var current = (par - 1);
    var prox = (par + 1);

    if (current < 0) {
        current = 2;
    }

    if (prox > 2){
        prox = 0;
    }

    var mfpElement = jQuery('#minifrontpage-99 .animate');
    var mfpElementLength = mfpElement.length;

    var liativo = jQuery('#mfptabs li');

    jQuery('#mfptabs li.activex').removeClass('activex');
    jQuery(liativo[par]).addClass('activex'); 

    jQuery('.minifrontpageid').animate({
        height: jQuery(mfpElement[par]).css('height')
    },
    {
        step: function(now, fx) {
            jQuery(mfpElement[current]).fadeOut();
            jQuery(mfpElement[par]).fadeIn();
        }
    });


    setTimeout(function () {teste(prox)}, 3000);
}

setTimeout(function () {teste(1)}, 3000);

});

Answer 2

If you want to scroll the page to the certain point use this (assuming that you have a link with id scrollToThis )

    $('html, body').animate({
        scrollTop: $("#scrollToThis").offset().top
    }, 2000);