jQueryとlocalScrollを使用してスライドアウトしてフェードする効果

Question

localScrollを使用してコンテンツスライダーを作成しています。問題は、私が外に出ているdivにフェード効果を与えて、消える前に消えるようにしたいということです。 これをどうすればいいですか？私はon beforeとon afterで何かを試しましたが、私が期待したものは得られませんでした。

ありがとうございます！

LEは：ここで私が使用しているコードです：

$(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

を参照してください：それはdisplay:noneにdivのスタイルを設定しますので、div要素を持っているのでhttp://docs.jquery.com/Effects/queueが

Answer 2

あなたはfadeOutを使用することはできません高さと幅がゼロで、scrollToプラグインがかなり悪くなってしまいます。不透明度を使用することをお勧めします。下のコードでは、最小不透明度を0.2に設定しました。これは、ゼロに設定すると、コンテンツがスクロールしていると伝えることが困難だったためです。

私はLocalScrollデモをとり、これらの変更を加えました。これはかなりうまくいくようです。以下のコードがデモで動作し、あなたの質問タイトルにlocalScrollがありますが、コードでserialScrollが使用されていることがわかったので、私はあなたのコードと一致させようとしませんでした。とにかく、コード内のul.slideshow liが.subのコードに相当するはずです。

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

編集：私はあなたのコードを投稿できるこのpastebin