如何用JS淡化淡出/淡出

时间:2013-11-28 13:16:46

标签: javascript jquery html css

我正在尝试使用此脚本在'page1','page2','page3'上显示我的#header但仅淡出,'page4'然后在'page5'上再次淡出它

目前我的#footer工作正常,除了'page5'之外,它隐藏在所有页面上。

<script type="text/javascript">
    $(document).ready(function () {
        $.fn.fullpage({
            anchors: ['page1', 'page2', 'page3', 'page4','page5'],
            slidesColor: ['#000', '#000', '#000', '#000', '#000'],
            'scrollOverflow': true,
            css3: true,
            fixedElements: '#header, #footer',
            afterRender: function () {
                $('#footer').hide();
                $('#header').show();
            },
            afterLoad: function (anchor, index) {
                if (index == 1, 2, 3, 4) {}
                $('#footer').fadeOut();
                if (index == 5) {
                    $('#footer').fadeIn();
                    }
                    if (index == 4) {}
                $('#header').fadeOut();
                if (index == 1, 2, 3, 5) {
                    $('#header').show();
                }
            }
        });
    });
</script> 

http://jsfiddle.net/Q79kF/

感谢您的帮助...

1 个答案:

答案 0 :(得分:-2)

好的..这可能是你写的顺序问题..使用你提供的代码,我相信这可能是你的问题。

在1,2,3中可见的标题在4处淡出。在5处淡入 页脚在1,2,3,4中不可见,但在5

时逐渐消失

尝试

            //if (index == 1, 2, 3, 4) {} //You dont need this anyway
            if(index == 1, 2, 3){
                $('#header').show(); //try using .css('display','block') if show() didnt work
                $('#footer').hide(); //try using .css('display','none') if hide() didnt work
            }
            if(index == 4){
                $('#header').fadeOut();
            }
            if(index == 5){
                $('#header').fadeIn();
                $('#footer').fadeIn();
            }

尝试调整一下..这就是我所理解的..如果我错了让我知道,会尽力帮助你..