Как изменить эффекты слайдов на эффекты затухания? Код ниже

Question

У меня есть этот код со слайд-эффектами, и мне нужны такие эффекты, как например http://ledlumen.at Какой и где мне нужно изменить то, что может работать?

Заранее благодарен! +++++++++++++++++++++++++++++++++++++++++++++++++

jQuery(document).ready(function($) {  

     //Set Default State of each portfolio piece 
     $(".paging").show(); 
     $(".paging a:first").addClass("active"); 

     //Get size of images, how many there are, then determin the size of the image reel. 
     var imageWidth = $(".window").width(); 
     var imageSum = $(".image_reel img").size(); 
     var imageReelWidth = imageWidth * imageSum; 

     //Adjust the image reel to its new size 
     $(".image_reel").css({'width' : imageReelWidth}); 

     //Paging + Slider Function 
     rotate = function(){  
      var triggerID = $active.attr("rel") - 1; //Get number of times to slide 
      var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide 

      $(".paging a").removeClass('active'); //Remove all active class 
      $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) 

      $(".desc").stop(true,true).slideUp('slow'); 

      $(".desc").eq($('.paging a.active').attr("rel") - 1).slideDown("slow"); 

      //Slider Animation 
      $(".image_reel").animate({ 
       left: -image_reelPosition 
      }, 1200); 
     }; 

     //Rotation + Timing Event 
     rotateSwitch = function(){ 
     $(".desc").eq($('.paging a.active').attr("rel") - 1).slideDown("slow"); 
      play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds 
       $active = $('.paging a.active').next(); 
       if ($active.length === 0) { //If paging reaches the end... 
        $active = $('.paging a:first'); //go back to first 
       } 
       rotate(); //Trigger the paging and slider function 
      }, 10000); //Timer speed in milliseconds (3 seconds)  

     }; 

     rotateSwitch(); //Run function on launch 

    //On Click 
     $(".paging a").click(function() {  
      $active = $(this); //Activate the clicked paging 
      //Reset Timer 
      clearInterval(play); //Stop the rotation 
      rotate(); //Trigger rotation immediately 
      rotateSwitch(); // Resume rotation 
      return false; //Prevent browser jump to link anchor 
     }); 
}); 

Answer 1

Просто замените slideDown с fadeIn и slideUp с fadeOut.

Вы также должны изменить это:

$(".image_reel").animate({ 
    left: -image_reelPosition 
}, 1200); 

Изменить это что-то вроде:

$(".image_reel").fadeOut(500, function() { 
    $(this).css('left', -image_reelPosition+'px'); 
    $(".image_reel").fadeIn(500); 
}); 

Answer 2

fadeIn() и fadeOut() может быть новых друзей. Попробуйте поиграть с ним при замене slideUp и slideDown.