Question

我有这个jQuery内容切换器，它只是在内容之间切换而没有任何效果。我希望它有一个简单的淡入淡出效果。我该怎么做才能添加它？

这是the fiddle，这里是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();
});

Answer 1

替换它：

    //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() method接受回调作为参数 - 它将在淡入淡出完成后调用您提供的函数，这是（在我看来）开始淡入其他内容的适当时间。

您可以通过提供字符串（"fast"或"slow"）或毫秒数来设置淡入淡出的速度。

演示：http://jsfiddle.net/LjHfZ/8/

如何为此添加淡入淡出过渡？

1 个答案: