test-valid 验证时fullpage第一页文字没有出来??老师帮忙看看哪

来源:

YibuMe

2016-07-01


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"/>

<title>Document</title>

<style>

body{

margin: 0;

padding: 0;

}

.component{

width: 50%;

height: 50px;

background-color: #eee;

margin: 0 auto;

margin-bottom: 20px;

text-align: center;

line-height: 50px;

display: none;

}

</style>

</head>

<body>

<div>

<div class="page section" id="page-1">

<div class="component log">log</div>

<div class="component slogan">slogan</div>

</div>

<div class="page section" id="page-2">

<div class="component desc">desc</div>

</div>

<div class="page section" id="page-3">

<div class="component bar">bar</div>

</div>

</div>

<script src="../js/lib/jquery.min.js"></script>

<script src="../js/lib/jquery-ui.min.js"></script>

<script src="../js/lib/jquery.fullPage.min.js"></script>

<script>

$(function () {

$('.h5').fullpage({

'sectionsColor':['red','green','yellow'],

onLeave:function (index,nextIndex,direction) {

$('.h5').find('.page').eq(index-1).trigger('onLeave');

},

afterLoad:function (anchorLink ,index) {

console.log($('.h5').find('.page').eq(index-1));

$('.h5').find('.page').eq(index-1).trigger('afterLoad');

}

})


$('.page').on('onLeave',function () {

console.log($(this).attr('id'),'======>','onLeave');

$(this).find('.component').trigger('onLeave');

})

$('.page').on('afterLoad',function () {

// debugger;

console.log($(this).attr('id'),'======>','afterLoad');

$(this).find('.component').trigger('afterLoad');

})

$('.component').on('afterLoad',function () {

$(this).fadeIn();

return false;

})

$('.component').on('onLeave',function () {

$(this).fadeOut();

return false;

})

})

</script>

</body>

</html>

老师这是我的代码,为什么加载第一页的时候文字没有出来呀

写回答

3回答

Lyn

2016-07-04

可以试试这代码

.component {
   display: block;
   opacity: 0;
}

最好是有线上地址,我看看?

0
1
YibuMe
老师 这是我的地址 http://wenjun.p.imooc.io/test/test-valid.html ,如果设置为display :block 就没有动画效果了,刚进入的时候
2016-07-04
共1条回复

苏莫离

2016-07-04

对的,我也发现这个问题了,第一页不显示

0
0

苏莫离

2016-07-02

display: none;变成block

0
1
YibuMe
变为blocl后就不会触发fadeIn函数了啊,现在就是打开浏览器首次进入第一页后,第一页的文字不会显示的
2016-07-02
共1条回复

Web App用组件方式开发全站

用HTML5/CSS3/JS流行技术,实现移动端可视化数据报告

3164 学习 · 516 问题

查看课程