JQuery - jCarousel -. FadeIn

Question

Я использую плагин jCarousel (http://sorgalla.com/projects/jcarousel/) и вместо изображения задвинуть (например, в «Карусели с автопрокруткой» демо)

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

Спасибо, если кто-то может помочь в этом.

Phil

Answer 1

Цикл плагин будет работать с текстом и изображением. Прокрутите страницу до раздела «Обратные вызовы» on this page, чтобы увидеть, как цикл работает с текстом.

Answer 2

Вы можете моделировать замирание даже хотя jCarousel знает только прокручивать слайды:

$('#yourContainer').jcarousel({ 
    visible: 1, 
    scroll: 1, 
    itemLoadCallback: { 
     onBeforeAnimation: mycarousel_fadeOut, 
     onAfterAnimation: mycarousel_fadeIn 
    } 
}); 

function mycarousel_fadeOut(carousel) { 
    var JCcontainerID = carousel.clip.context.id; 
    $('#' + JCcontainerID).fadeOut(); 
} 

function mycarousel_fadeIn(carousel) { 
    var JCcontainerID = carousel.clip.context.id; 
    $('#' + JCcontainerID).fadeIn(); 
} 

Таким образом, вы исчезать из контейнера до прокрутки анимации начинается и исчезать обратно в после того, как закончил, не видя ничего иначе, чем эффект замирания.

Answer 3

Изменение функций это работает, вроде (вы все еще можете увидеть свиток тоже):

function mycarousel_fadeOut(carousel) { 
    var JCcontainer = carousel.clip.context; 
    $(JCcontainer).fadeOut(); 
} 

function mycarousel_fadeIn(carousel) { 
    var JCcontainer = carousel.clip.context; 
    $(JCcontainer).fadeIn(); 
} 

Answer 4

var mycarousel_fadeOut = function(carousel, state) { 
    if (state !== "init") { 
     $(carousel.clip.context).find('img').fadeOut(800); 
    } 
}; 

var mycarousel_fadeIn = function(carousel, state) { 
    if (state !== "init") { 
     $(carousel.clip.context).find('img').fadeIn(800); 
    } 
}; 

Answer 5

Попробуйте это:

var jcarousel = $('#yourContainer'); 

    jcarousel.jcarousel({ 
     animation: { 
      duration: 0 // make changing image immediately 
     } 
    }); 

    // make fadeIn effect 
    jcarousel.on('jcarousel:animate', function (event, carousel) { 
     $(carousel._element.context).find('li').hide().fadeIn(1000); 
    }); 

Answer 6

Для 0.3.x jCarousel версии Я пошел с этим:

var carousel = $('.jcarousel').jcarousel({ 
     list  : '.items', 
     items  : '.i', 
     wrap  : 'both', // for good measure 
     animation: { 
      duration: 0 // swap slides immediately 
     } 
    }).jcarouselAutoscroll({ 
     interval: 1000 * 5, 
     target: '+=1', 
     autostart: true 
    }); 

    // fade hack 
    carousel.jcarousel('items').hide(); 
    carousel.jcarousel('first').show(); 
    carousel.on('jcarousel:visiblein', function(event, carousel) { 
     $(event.target).fadeIn(); 
    }); 
    carousel.on('jcarousel:visibleout', function(event, carousel) { 
     $(event.target).fadeOut(); 
     carousel._trigger('animateend'); // the event doesn't fire when items are positioned absolutely (so autoscroll wouldn't work), fire manually 
    }); 

некоторые c сс, чтобы заставить его работать:

.items {height: 450px;} 
    .i  {position: absolute;}