jQuery - jCarousel -. FadeIn

Question

J'utilise le plugin jCarousel (http://sorgalla.com/projects/jcarousel/) et plutôt que les images glissent dans (comme dans le « carrousel avec défilement automatique » demo)

Je voudrais que les images se fanent dans l'utilisation est un jCarousel qui défile automatiquement et ne montre qu'un seul élément à la fois. Mais j'ai regardé le plugin Cycle mais cela ne semble pas fonctionner avec mon scénario car l'élément que je veux montrer contient du texte et une image.

Merci si quelqu'un peut aider avec ceci.

Phil

Answer 1

Le plugin Cycle fonctionnera avec du texte et une image. Faites défiler jusqu'à la section Callbacks on this page pour voir Cycle travaillant avec du texte.

Answer 2

Vous pouvez simuler un effet de fondu, même si jCarousel sait que pour faire défiler les diapositives:

$('#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(); 
} 

De cette façon, vous fanent le conteneur avant que l'animation de défilement commence et se fanent en arrière après c'est fini sans rien voir autre que l'effet de décoloration.

Answer 3

Modification des fonctions à cela fonctionne, en quelque sorte (vous pouvez encore voir le défilement trop):

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

Essayez ceci:

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

Pour la 0.3.x la version jCarousel Je suis allé avec cela:

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

certains c ss pour le faire fonctionner:

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