jQuery jCarousel - FadeIn

Je suis en utilisant le plugin jCarousel (http://sorgalla.com/projects/jcarousel/) et plutôt que les images de la diapositive (comme dans le "Carrousel avec le défilement automatique" démo)

Je voudrais que les images en fondu. L'utilisation est un jCarousel que auto défile et ne montre qu'un seul élément à la fois. Mais j'ai regardé Cycle plugin, mais il ne semble pas fonctionner avec mon scénario que l'élément que je veux vous montrer contenant du texte et une image.

Merci si quelqu'un peut aider avec cela.

Phil

OriginalL'auteur Phil | 2009-08-14

  1. 0

    Le Cycle plugin va travailler avec du texte et une image. Faites défiler vers le bas pour les Rappels section sur cette page de voir le Cycle de travail avec le texte.

    OriginalL'auteur Andy Gaskell

  2. 6

    Vous pouvez simuler un effet de fondu, même si jCarousel sait seulement 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 fondez le récipient avant de le défilement de l'animation commence et fondu en après c'est fini, sans rien voir d'autre que l'effet de décoloration.

    Salut, cette solution semble être la bonne approche, mais ne fonctionne pas du tout - j'ai un "non reconnu expression: #" erreur lors de l'utilisation de cette, de la JCcontainerID reste vide.
    cela a fonctionné pour moi
    J'ai eu cette erreur "non reconnu expression: #" trop! La solution est d'utiliser $(carrousel.le clip.contexte).fadeOut (); $(carrousel.le clip.contexte).fadeIn(); au lieu de cela.

    OriginalL'auteur bebefx

  3. 6

    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);
    });
    comment feriez-vous un supplément de fadeout effet / fondu?

    OriginalL'auteur ogaltsev

  4. 2

    De changer les fonctions de ses œuvres, une sorte de (vous pouvez toujours 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(); 
}

    OriginalL'auteur Jamie

  5. 1
    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);
    }
};
    Vous avez raison, l'état doit être vérifié!

    OriginalL'auteur stanleyhlng

  6. 1

    Pour la 0.3.x jCarousel version, je suis allé avec ceci:

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

    un peu de css pour le faire fonctionner:

       .items {height: 450px;}
   .i     {position: absolute;}
    Le CSS est requise. Le fondu en effet ne fonctionnera pas sans lui.
    Oui, sinon les diapositives (.i) ne pas être sur le dessus (chevauchement) les uns des autres.

    OriginalL'auteur Gappa