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 回答