為什么我的第一屏打開時沒有動畫，從第二屏滾到第一屛時有動畫？
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<meta?name="renderer"?content="webkit">
????<title>fullpage</title>
????<meta?name="description"?content="">
????<meta?name="keywords"?content="">
????<meta?name="author"?content="Jesse">
????<link?href="jquery.fullPage.css"?rel="stylesheet">
????<script?src="jquery.min.js"></script>
????<script?src="jquery.fullPage.min.js"></script>
???
</head>
<style?type="text/css">
section?{?position:?relative;}
.section1?.left?{?width:?100px;?height:?40px;?line-height:?40px;?font-size:?35px;?box-shadow:0px?0px?3px?#FFF;?position:?absolute;?top:?200px;?left:?50px;}
.section1?.right?{width:?100px;?height:?40px;?line-height:?40px;?font-size:?35px;?box-shadow:0px?0px?3px?#FFF;?position:?absolute;?top:?200px;?right:?50px;}
.section2?.left?{?width:?100px;?height:?40px;?line-height:?40px;?font-size:?35px;?box-shadow:0px?0px?3px?#FFF;?position:?absolute;?top:?200px;?left:?50px;}
.section2?.right?{width:?100px;?height:?40px;?line-height:?40px;?font-size:?35px;?box-shadow:0px?0px?3px?#FFF;?position:?absolute;?top:?200px;?right:?50px;}
</style>
<body>
?<script>
????$(function()?{
????????$('#fullpage').fullpage({
????????????
???????????anchors:['page1','page2','page3','page4','page5'],
????????????sectionsColor:['green','orange','gray','red','yellow'],
???????????navigation:true,
????????????afterLoad:function(link,index){
????????????????switch(index){
????????????????????case?0:
????????????????????break;
????????????????????case?1:
????????????????????move('.section1?.left')
????????????????????.x(300)
????????????????????.end();
????????????????????case?2:
?????????????????????move('.section2?.right')
????????????????????.x(-300)
????????????????????.end();
????????????????????break;
????????????????????case?3:
????????????????????break;
?????????????????????case?4:
????????????????????break;
????????????????????default:
????????????????????break;
??????????????????
????????????????}
????????????},
????????????onLeave:function(link,index){
????????????????switch(index){
????????????????????case?0:
????????????????????break;
????????????????????case?1:
????????????????????move('.section1?.left')
????????????????????.x(-300)
????????????????????.end();
????????????????????case?2:
?????????????????????move('.section2?.right')
????????????????????.x(300)
????????????????????.end();
????????????????????break;
????????????????????case?3:
????????????????????break;
?????????????????????case?4:
????????????????????break;
????????????????????default:
????????????????????break;
????????????}
????????}
????????})
????});
????</script>
????<div?id="header"?style="position:fixed;top:20px;right:20px;font-size:?30px;color:#fff;">123</div>
????<div?id="fullpage">
????????<div?class="section?section1">
????????????<div?class="left">
????????????????left
????????????</div>
????????????<div?class="right">
????????????????right
????????????</div>
????????</div>
????????<div?class="section?section2">
?????????<div?class="left">
????????????????left
????????????</div>
????????????<div?class="right">
????????????????right
????????????</div></div>
????????<div?class="section">
????????????<div?class="slide">?Slide?1?</div>
????????????<div?class="slide">?Slide?2?</div>
????????????<div?class="slide?active">?Slide?3?</div>
????????????<div?class="slide">?Slide?4?</div>
????????</div>
????????<div?class="section">section4</div>
????????<div?class="section">section5</div>
????</div>
????
??
???
?????<script?src="http://cdn.bootcss.com/move.js/0.4.0/move.js"></script>
</body>
</html>老師你好，我想問一下。為什么我的第一屏打開時沒有動畫，從第二屏滾到第一屛時有動畫？
2016-11-09
<!DOCTYPE html>
<html>
?
<head>
? ? <meta charset="utf-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="renderer" content="webkit">
? ? <title>fullpage</title>
? ? <meta name="description" content="">
? ? <meta name="keywords" content="">
? ? <meta name="author" content="Jesse">
? ? <link rel="stylesheet" >
<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"></script>
? ??
</head>
<style type="text/css">
section { position: relative;}
.section1 .left { width: 100px; height: 40px; line-height: 40px; font-size: 35px; box-shadow:0px 0px 3px #FFF; position: absolute; top: 200px; left: 50px;}
.section1 .right {width: 100px; height: 40px; line-height: 40px; font-size: 35px; box-shadow:0px 0px 3px #FFF; position: absolute; top: 200px; right: 50px;}
.section2 .left { width: 100px; height: 40px; line-height: 40px; font-size: 35px; box-shadow:0px 0px 3px #FFF; position: absolute; top: 200px; left: 50px;}
.section2 .right {width: 100px; height: 40px; line-height: 40px; font-size: 35px; box-shadow:0px 0px 3px #FFF; position: absolute; top: 200px; right: 50px;}
</style>
<body>
?<script>
? ? $(function() {
? ? ? ? $('#fullpage').fullpage({
? ? ? ? ? ? ?
? ? ? ? ? ?anchors:['page1','page2','page3','page4','page5'],
? ? ? ? ? ? sectionsColor:['green','orange','gray','red','yellow'],
? ? ? ? ? ?navigation:true,
? ? ? ? ? ? afterLoad:function(link,index){
? ? ? ? ? ? ? ? switch(index){
? ? ? ? ? ? ? ? ? ? case 0:
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case 1:
? ? ? ? ? ? ? ? ? ? move('.section1 .left')
? ? ? ? ? ? ? ? ? ? .x(300)
? ? ? ? ? ? ? ? ? ? .end();
? ? ? ? ? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? ? ? ?move('.section2 .right')
? ? ? ? ? ? ? ? ? ? .x(-300)
? ? ? ? ? ? ? ? ? ? .end();
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case 3:
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ?case 4:
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? default:
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? onLeave:function(link,index){
? ? ? ? ? ? ? ? switch(index){
? ? ? ? ? ? ? ? ? ? case 0:
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case 1:
? ? ? ? ? ? ? ? ? ? move('.section1 .left')
? ? ? ? ? ? ? ? ? ? .x(-300)
? ? ? ? ? ? ? ? ? ? .end();
? ? ? ? ? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? ? ? ?move('.section2 .right')
? ? ? ? ? ? ? ? ? ? .x(300)
? ? ? ? ? ? ? ? ? ? .end();
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case 3:
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ?case 4:
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? default:
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? })
? ? });
? ? </script>
? ? <div id="header" style="position:fixed;top:20px;right:20px;font-size: 30px;color:#fff;">123</div>
? ? <div id="fullpage">
? ? ? ? <div class="section section1">
? ? ? ? ? ? <div class="left">
? ? ? ? ? ? ? ? left
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="right">
? ? ? ? ? ? ? ? right
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="section section2">
? ? ? ? ?<div class="left">
? ? ? ? ? ? ? ? left
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="right">
? ? ? ? ? ? ? ? right
? ? ? ? ? ? </div></div>
? ? ? ? <div class="section">
? ? ? ? ? ? <div class="slide"> Slide 1 </div>
? ? ? ? ? ? <div class="slide"> Slide 2 </div>
? ? ? ? ? ? <div class="slide active"> Slide 3 </div>
? ? ? ? ? ? <div class="slide"> Slide 4 </div>
? ? ? ? </div>
? ? ? ? <div class="section">section4</div>
? ? ? ? <div class="section">section5</div>
? ? </div>
?
? ? ?
?
? ?
? ??
? ? ?<script src="http://cdn.bootcss.com/move.js/0.4.0/move.js"></script>
</body>
?
</html>
我把你的資源改了一下，沒什么問題，第一屏的那個left往左飄也是可以的
2018-01-07
倒是指出修改了哪里呀？afterLoad 我用這個回調，第一屏并不會觸發呀，