如何使文字svg-animation可見時啓動？

我有我的網頁`如何使文字svg-animation可見時啓動？

<a href="#" class="next-section">Next Section</a> 
    <div class="section-content"> 

    </div> 
</section> 

<section id="about"> 
    <a href="#" class="prev-section">Previous Section</a> 
    <a href="#" class="next-section">Next Section</a> 
    <div class="section-content"> 
     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="480px" height="640px" viewBox="0 0 480 640" enable-background="new 0 0 480 640" xml:space="preserve"> 

<rect x="68.631" y="175.105" fill="none" width="350.877" height="113.158"/>

「SVG路徑HERE」

</div> 
</section> 

<section id="services"> 
    <a href="#" class="prev-section">Previous Section</a> 
    <div class="section-content"> 

    </div> 
</section>

他們被點擊的JavaScript

jQuery.fn.extend({ 
    scrollTo : function(speed, easing) { 
    return this.each(function() { 
     var targetOffset = $(this).offset().top; 
     $('html,body').animate({scrollTop: targetOffset}, speed, easing); 
    }); 
    } 
}); 

$('.next-section').click(function(e){ 
    e.preventDefault(); 
    var $this = $(this), 
     $next = $this.parent().next(); 

    $next.scrollTo(150, 'linear'); 
}); 

$('.prev-section').click(function(e){ 
    e.preventDefault(); 
    var $this = $(this), 
     $prev = $this.parent().prev(); 

    $prev.scrollTo(150, 'linear'); 
});

在第二部分我有一些滾動的3段svg，用CSS動畫，但我想在svg可見時開始動畫。我應該怎麼做？

來源

2015-07-06 Jim Ross

請讓小提琴，這將更容易讓我們看到你的意思，並幫助代碼... jsfiddle.net – Julo0sS

http://jsfiddle.net/k29pwt5t/但滾動和svg動畫不在那裏工作......在左上方有一個按鈕「下一部分」，使頁面向下滾動。 –

你嘗試過jQuery選擇器（'：visible'）嗎？它應該選擇一個可見的元素......你應該使用一些$（function（）{}）來測試你的元素的位置是否位於窗口頂部和底部之間...... – Julo0sS

您可以將「完整」函數傳遞給jQuery animate()。當動畫完成時，這個完整的函數被調用。在那個函數中，你可以添加一個類到你的SVG中來觸發動畫。

來源

2015-07-06 13:07:44

如何使文字svg-animation可見時啓動？

回答

相關問題