2015-01-11 3 views
0

У меня возникли проблемы с применением fadeIn и функцией для секции .intro слайда. Я настроил его на разделы, которые я хочу, но не могу применить его к слайду. Я очень новичок в написании html и т. П.Применение fadeIn к слайду fullpage.js

Это CSS я написал:

#section1 .intro{ 
    display:none; 
} 

#slide1 .intro{ 
    display:none; 
} 

Это Javascript я добавил:

afterLoad: function(anchorLink, index, slideIndex){ 

       //section 1 
       if(index == 2){ 
        //moving the image 
        $('#section1').find('.intro').first().fadeIn(800, function(){ 
         $('#section1').find('.intro').last().fadeIn(800); 
        });; 
       } 

       //section 2 
       if(slideIndex == 1){ 
        //moving the image 

        $('#slide1').find('.intro').first().fadeIn(800, function(){ 
         $('#slide1').find('.intro').last().fadeIn(800); 
        });; 
       } 

Это HTML для слайдов, которые я хочу, чтобы применить эффект :

<div class="section" id="section2"> 
    <div class="slide" id="slide1"> 
     <div class="intro"> 
      <h2>Header</h2> 
     <br> 
     <br> 
     <br> 
     <p>Text</p> 
     </div> 
    </div> 

    <div class="slide" id="slide2"> 
     <img src="Images/image.svg"> 
    </div> 
    </div> 

Я также попытки применить переход FADEOUT, так что, как зритель покинул раздел его, будет исчезать о так что в следующий раз, когда этот раздел будет просмотрен, переход к постепенному переходу произойдет снова. Но это была моя довольно безнадежная попытка:

afterLeave: function(anchorLink, index){ 

       //section 1 
       if(index == 2){ 
        //moving the image 
        $('#section1').find('.intro').first().fadeOut(800, function(){ 
         $('#section1').find('.intro').last().fadeOut(800); 
        });; 
       } 

Любые указатели были бы весьма благодарны.

+0

попробуйте использовать. Active not # section1 -> $ ('. Active'). FadeOut(); $ ('Активный'.) Следующий() FadeIn()..; сделайте из этого скрипку, и я разобрался. – fearis

ответ

0

afterLoadaccording to the documentation имеет только два параметра, и вы используете 3:

afterLoad: function(anchorLink, index){}, 

onLeaveaccording to the documentation имеет 3 параметра, и вы используете 2:

onLeave: function(index, nextIndex, direction){}, 

Кроме того, обратите внимание, что вы не используете onLeave , вы используете afterLeave, которого не существует.