0

私はこのjQueryコンテンツスイッチャーを持っていますが、コンテンツを切り替えるだけで効果はありません。シンプルなフェード効果が欲しいのですが。それを追加するにはどうすればよいですか？

これがフィドルで、これがjQueryコードです。

$(function(){

    function contentSwitcher(settings){
        var settings = {
           contentClass : '.content',
           navigationId : '#navigation'
        };

        //Hide all of the content except the first one on the nav
        $(settings.contentClass).not(':first').hide();
        $(settings.navigationId).find('li:first').addClass('active');

        //onClick set the active state, 
        //hide the content panels and show the correct one
        $(settings.navigationId).find('a').click(function(e){
            var contentToShow = $(this).attr('href');
            contentToShow = $(contentToShow);

            //dissable normal link behaviour
            e.preventDefault();

            //set the proper active class for active state css
            $(settings.navigationId).find('li').removeClass('active');
            $(this).parent('li').addClass('active');

            //hide the old content and show the new
            $(settings.contentClass).hide();
            contentToShow.show();
        });
    }
    contentSwitcher();
});
4

1 に答える 1

2

これを置き換えます：

    //hide the old content and show the new
    $(settings.contentClass).hide();
    contentToShow.show();

これとともに：

    //hide the old content and show the new
    $(settings.contentClass).fadeOut(800, function() {
       contentToShow.fadeIn(800);
    });

この.fadeOut()メソッドは、パラメーターとしてコールバックを受け入れます。フェードが完了した後、指定した関数を呼び出します。これは、他のコンテンツでフェードを開始するのに適切な時間です（私の意見では）。

"fast"文字列（または"slow"）またはミリ秒数を指定することにより、フェードの速度を設定できます。

デモ： http： //jsfiddle.net/LjHfZ/8/

于 2013-01-20T06:01:03.617 に答える