jQuery - jCarousel -. FadeIn

Question

ich das Plugin jCarousel (http://sorgalla.com/projects/jcarousel/) verwenden und nicht die Bilder in gleiten (wie im "Karussell mit Autoscrolling" Demo)

ich die Bilder in verblassen möchte Die Nutzung ist ein jCarousel, das automatisch scrollt und nur ein Element gleichzeitig anzeigt. Aber ich habe das Cycle-Plugin angeschaut, aber es schien nicht mit meinem Szenario zu funktionieren, da das Element, das ich zeigen möchte, Text und ein Bild enthält.

Danke, wenn jemand damit helfen kann.

Phil

Answer 1

The Cycle Plugin wird mit Text und einem Bild arbeiten. Scrollen Sie nach unten zum Abschnitt Rückrufe on this page, um zu sehen, wie Zyklus mit Text arbeitet.

Answer 2

Sie können einen Fading-Effekt simulieren, obwohl jCarousel kennt nur die Folien blättern:

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

diese Weise können Sie den Container ausgeblendet, bevor das Scrollen Animation beginnt und verblassen sie zurück in nachdem es fertig ist, ohne etwas zu sehen anders als der verblassende Effekt.

Answer 3

die Funktionen ändern, um dies funktioniert, Art (Sie können immer noch die Schriftrolle sehen):

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

Try this:

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

Für die 0.3.x jCarousel Version Ich ging damit:

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

einige c ss, damit es funktioniert:

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