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和jQuery中的fadeout來讓事情逐漸消失