在屏幕上可見時在進度條上啓動動畫

我想創建一個包含多個部分的網頁。其中一個部分就像進度條。這些進度條是'動畫'，以便用戶在屏幕上看到它們加載，如示例中所示。在屏幕上可見時在進度條上啓動動畫

Example here

現在這個工作，因爲它是，但我的問題是這樣的：

我想要的進度條開始加載時，酒吧成爲在屏幕上可見。

一旦用戶向下滾動並將它們放在屏幕中間，應該開始「動畫」。現在是動畫的方式開始在頁面加載，但酒吧沒有看到如下面的小提琴：

Fiddle

一點點額外的將是每個欄開始加載後，以前的是完了。

我發現堆了一些類似的問題，但答案並不足夠我的需求： Animate progress bar on scroll & Run animation when element is visible on screen

我嘗試這樣的東西（它不是實際的代碼，但它是我記得的話）：

var target = $("#third").offset().top; 
var interval = setInterval(function() { 
    if ($(window).scrollTop() >= target) { 
     //start loading progress bar 
    } 
}, 250);

但沒有任何好的結果。任何人都可以幫助我解決這個問題嗎？

在此先感謝！

來源

2014-01-15 Filip Huysmans

這裏是一個小提琴：http://jsfiddle.net/rAQev/4/

我用滾動偏移量的偏移時，這部分變得可見，檢測了一下比較，你的專門章節。動畫排隊使用jQuery queue函數一個接一個地處理，你可以在jQuery文檔（http://api.jquery.com/queue/）中閱讀它。另外scroll當第一次「加載」發生時，事件處於未綁定狀態，當部分可見時，不會在滾動事件上一次又一次運行「加載」。

來源

2014-01-15 21:52:45

這正是我需要的！感謝！ –

工程，但$（文檔）。解除綁定（ '滾動'）;對我造成一些其他副作用。 –

，讓我試試

function startProgressBar() { 

      $(".meter > span").each(function() { 
       $(this) 
        .data("origWidth", $(this).width()) 
        .width(0) 
        .animate({ 
         width: $(this).data("origWidth") 
        }, 1200); 
      }); 

    } 

$(window).scroll(function() { 
    var target = $('#third'); 
    var targetPosTop = target.position().top; // Position in page 
    var targetHeight = target.height(); // target's height 
    var $target = targetHeight + targetPosTop; // the whole target position 
    var $windowst = $(window).scrollTop()-($(window).height()/2);  // yes divided by 2 to get middle screen view. 

    if (($windowst >= $targetPosTop) && ($windowst < $target)){ 
       // start progressbar I guess 
       startProgressBar(); 
    } 

});

給它一個嘗試，讓我知道。

來源

2014-01-15 20:56:38

loooks相當工作 –

啊yeahhhhhhhhh！ –

對不起，我編輯它。現在就試試吧。應該沒事！ –

這裏是一個更新的小提琴http://jsfiddle.net/9ybUv/

這一個允許所有的進度條在同一時間運行。如果你和我一樣，而且有5個或更多，那麼做一個需要很長時間，然後是下一個，然後是下一個。

$(function() { 

    var $section = $('#third'); 

    function loadDaBars() { 
       $(".meter > span").each(function() { 
        $(this) 
         .data("origWidth", $(this).width()) 
         .width(0) 
         .animate({ 
          width: $(this).data("origWidth") 
         }, 1200); 
       }); 
    } 

    $(document).bind('scroll', function(ev) { 
     var scrollOffset = $(document).scrollTop(); 
     var containerOffset = $section.offset().top - window.innerHeight; 
     if (scrollOffset > containerOffset) { 
      loadDaBars(); 
      // unbind event not to load scrolsl again 
      $(document).unbind('scroll'); 
     } 
    }); 

});

來源

2014-05-12 21:06:58 Lance

不錯的更新！：d –

在屏幕上可見時在進度條上啓動動畫

回答

相關問題