Jquery Transition

Question

I have put together an image scroller using jquery, like this

function rotateImages(whichHolder, start) {
    var images = $('#' +whichHolder).find('img');
    if(images.length < 1) return;

    start = start || 0; // Allow not to specify 0 when first calling
    if (start >= images.length) start=0;

    images.css({display: 'none'});

    var thisImg = $('#' +whichHolder +' img').get(start);
    $(thisImg).css({display: 'block'});

    return start + 1;
}

var start = 1;

$(function(){

    window.setInterval(function() {

        start = rotateImages('rotator', start);

    }, 5000);   

});

the images just change from one to the next, what i would like to do is put a transition effect in there, similar to ones that NivoSlider uses. How would I go about this or where can I find the resources to see how it is done. I would like to make the transition a little more pleasing to the eye.

Any help appreciated.

Answer 1

well, trying to answer "how", what that slideshow do is to divide the image into slices (or boxes), e.g.: they use this function to divide the image into slices

    var createSlices = function(slider, settings, vars) {
        if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
        $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
        var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height();

        for(var i = 0; i < settings.slices; i++){
            var sliceWidth = Math.round(slider.width()/settings.slices);

            if(i === settings.slices-1){
                slider.append(
                    $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ 
                        left:(sliceWidth*i)+'px', 
                        width:(slider.width()-(sliceWidth*i))+'px',
                        height:sliceHeight+'px', 
                        opacity:'0',
                        overflow:'hidden'
                    })
                );
            } else {
                slider.append(
                    $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ 
                        left:(sliceWidth*i)+'px', 
                        width:sliceWidth+'px',
                        height:sliceHeight+'px',
                        opacity:'0',
                        overflow:'hidden'
                    })
                );
            }
        }

        $('.nivo-slice', slider).height(sliceHeight);
        sliderImg.stop().animate({
            height: $(vars.currentImage).height()
        }, settings.animSpeed);
    };

once they divide the images into peaces they try to make a transition animating each peace, e.g.: this is how they are supposed to animate the slices

            createSlices(slider, settings, vars);
            timeBuff = 0;
            i = 0;
            slices = $('.nivo-slice', slider);
            if(currentEffect === 'sliceDownLeft') { slices = $('.nivo-slice', slider)._reverse(); }

            slices.each(function(){
                var slice = $(this);
                slice.css({ 'top': '0px' });
                if(i === settings.slices-1){
                    setTimeout(function(){
                        slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
                    }, (100 + timeBuff));
                } else {
                    setTimeout(function(){
                        slice.animate({opacity:'1.0' }, settings.animSpeed);
                    }, (100 + timeBuff));
                }
                timeBuff += 50;
                i++;
            });

but, I personally think if you want a slideshow that animate every slide like that, just use NivoSlider, don't you think

Answer 2

What you're doing here is basically changing the display of the image. Try using fadeIn and fadeOut from JQuery to make things disappear progressively