Jquery Переход

Question

Я соединили скроллер изображения с помощью JQuery, как этот

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); 

}); 

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

Любая помощь приветствуется.

Answer 1

Ну, пытаясь ответить «как», что это слайд-шоу делает, это разделить изображение на кусочки (или коробки), например: они используют эту функцию для разделения изображения на ломтики

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

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

  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++; 
      }); 

но лично я подумайте, хотите ли вы слайд-шоу, которое оживляет каждый слайд, как это, просто используйте NivoSlider, не так ли?

Answer 2

Что вы здесь делаете, это в основном изменение отображения изображения. Попробуйте использовать fadeIn и fadeOut из JQuery, чтобы ускорить процесс исчезновения