Effet de fondu et de fondu en utilisant jQuery et localScroll

Question

J'utilise localScroll pour créer un curseur de contenu. Le problème est que je veux donner un effet de fondu à la div que je glisse, pour le faire disparaître avant qu'il ne disparaisse. Quelqu'un at-il une idée de comment puis-je faire cela? J'ai essayé quelque chose avec onBefore et onAfter mais je n'ai pas eu ce que j'attendais.

Merci!

LE: voici le code que j'utilise:

$(document).ready(function() { 
     var localScroll = $('#slider .slideshow-wrapper') 
     var localSections = $('#slider .slideshow-wrapper ul.slideshow li'); 
     var local = $('#slider ul.slideshow'); 
     local.css('width', localSections[0].offsetWidth * localSections.length); 

     var localScrollOptions = { 
     target: localScroll, 
     items: localSections, 
     navigation: 'ul.tabs li a', 
     hash: 'false', 
     axis: 'xy', 
     duration: 500, 
     easing: 'swing' 
     //onAfter: fadeAway 
     }; 
     $('.container').serialScroll(localScrollOptions); 

     $('ul.tabs').find('a span').click(selectNav); 


    }); 

Answer 1

Voir: http://docs.jquery.com/Effects/queue

Answer 2

Vous ne pouvez pas utiliser fadeOut car elle définit le style de div display:none et donc la div a une zéro hauteur et largeur rendant le plugin scrollTo gâcher assez mal. Je suggère d'utiliser l'opacité. Dans le code ci-dessous, j'ai mis l'opacité minimum à 0.2 parce que quand je l'ai mis à zéro, il était difficile de dire que le contenu défilait.

J'ai pris la démo LocalScroll et j'ai fait ces modifications - cela semble fonctionner plutôt bien. Je n'ai pas essayé de faire correspondre votre code car je sais que le code ci-dessous fonctionne avec la démo et le titre de votre question dit localScroll mais votre code utilise serialScroll. Quoi qu'il en soit, je devine le ul.slideshow li dans votre code devrait être équivalent au .sub dans le code ci-dessous.

$.localScroll({ 
target: '#content', // could be a selector or a jQuery object too. 
queue: false, 
duration: 500, 
hash: false, 
easing: 'swing', 
onBefore:function(e, anchor, $target){ 
    // The 'this' is the settings object, can be modified 
    $('.sub').animate({ opacity: 0.2 }, 250); 
}, 
onAfter:function(anchor, settings){ 
    // The 'this' contains the scrolled element (#content) 
    $(anchor).animate({ opacity: 1 }, 250); 
} 
}); 

Edit: J'ai posté une démo à ce pastebin