滾動時執行動畫
[英]Perform animation when scrolling
問題描述
我有 bootstrap 的進度條，這是 html ：
$(".progress-bar").each(function () { // .each(function (i, item) work too! var progressBar = $(this); // $(this) would work too progressBar.animate({ width: progressBar.data('width') + '%' }, 1500); }); <body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class='jumbotron' style='height:1400px' width='auto'> <h1>please scroll down</h1> </div> <div class="alert alert-success"> <div class="skill-name">ON PROGRESS 357/487</div> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" data-width="70"> </div> </div> </div> <div class="alert alert-danger"> <div class="skill-name">FAILED 30/487</div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" data-width="30"> </div> </div> </div> </body>
當我加載 HTML 時動畫正在運行，因此動畫進度條不起作用。 當我向下滾動查看進度條時如何設置動畫？
1 個解決方案
解決方案1
1 2017-02-07 19:58:48
這是一些東西：
引導： http : //www.bootply.com/lRLMiaE7Gy
查詢：
$(function(){
$(window).scroll(function(){
$(".progress-bar:not(.animated)").each(function(){
if ($(this).is(':visible')) {
var progressBar = $(this); // $(this) would work too
progressBar.animate({
width: progressBar.data('width') + '%'
}, 1500);
progressBar.addClass('animated');
}
});
});
});
片段
$(function(){ $(window).scroll(function(){ $(".progress-bar:not(.animated)").each(function(){ if ($(this).is(':visible')) { var progressBar = $(this); // $(this) would work too progressBar.animate({ width: progressBar.data('width') + '%' }, 1500); progressBar.addClass('animated'); } }); }); });
<body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class='jumbotron' style='height:1400px' width='auto'> <h1>please scroll down</h1> </div> <div class="alert alert-success"> <div class="skill-name">ON PROGRESS 357/487</div> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" data-width="70"> </div> </div> </div> <div class="alert alert-danger"> <div class="skill-name">FAILED 30/487</div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" data-width="30"> </div> </div> </div> </body>
向下滾動時粘性標題動畫有效，但向上滾動時無效
[英]Sticky header animation working when scrolling down but not when scrolling up
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.