導航到JavaScript時重新在幻燈片中進行動畫製作：JavaScript

我有一個使用全屏幻燈片的頁面網站（由fullPage.js支持）。導航到JavaScript時重新在幻燈片中進行動畫製作：JavaScript

我有這個腳本運行動畫時，頁面第一次加載（第一頁是動畫）動畫一些文本我相當新的JS，所以我想知道如何讓它執行動畫每一次用戶導航到幻燈片？

JS：

$(document).ready(function() { 
     $.fn.fullpage({ 
      slidesColor: ['#161616', '#161616'], 
      anchors: ['', 'Bye']}); 

     $(".test").each(function(i) { 
      $(this).delay(i*600).animate({ opacity: 1 }, 700) 
     });   
    }); 
</script>

它只是動畫3 spans。當我導航回到幻燈片時，我想讓它再次製作動畫。還有我怎麼得到它的設置opacity = 0時，導航到另一張幻燈片（以便它可以被複活

HTML：

<div class="section active" id="section0"> 
<h1>?</h1> 
<h2><span class="test">1.</span> <span class="test">2.</span> <span class="test">3.</span></h2> 
<a onclick="javascript:window.location='#CV';"><img class="downArrow" src="images/arrow.svg"/></a>

CSS爲.test：

.test{ 
     opacity: 0; 
    }

來源

2014-02-08 KyleMHB

您可以設置www.jsfiddle.net嗎？ – VIDesignz

我不知道如何將其他JS插件添加到它？我會稍後檢查一下，凌晨3點這裏需要睡覺！ – KyleMHB

好聽起來很好的人。您可以在jsfiddle控制面板左側的「外部資源」部分放置一個指向該插件的鏈接。 – VIDesignz

所以我就是這樣做的。注意我用來改變opacity，這是因爲改變cssopacity是不穩定的，有時它不會改變所有的元素。

<script type="text/javascript"> 

    $(document).ready(function() { 

     $.fn.fullpage({ 
      anchors: ['1', '2'], 

      afterRender: function(){ 
      //For the initial animation, aferLoad does not work. 
       $(".test").each(function(i){ 
        $(this).delay(i*600).animate({ opacity: 1 }, 900); 
       }); 
      }, 

      afterLoad: function(anchorLink, index, slideAnchor, slideIndex){ 
      //When the first slide is navigated to perform animation. 
       if(anchorLink == '1'){ 
        $(".test").each(function(i){ 
         $(this).delay(i*600).animate({ opacity: 1 }, 900); 
        }); 
       } 
      }, 

      onLeave: function(index, direction){ 
      //When navigated away from first slide reset the opacity. 
       if(index == '1' && direction == 'down'){ 
        $(".test").fadeTo(400,0); 
       } 
      } 
     }); 
    }); 
</script>

來源

2014-02-08 11:18:06 KyleMHB

導航到JavaScript時重新在幻燈片中進行動畫製作：JavaScript

回答

相關問題