Question

我试图使用jQuery进行动画制作。但是当我来回滚动时，它会保持动画效果，我希望宽度为width: 50%，但它会不断增加宽度。

var target = $('.target').offset().top + 1;

$(document).scroll(function(){
  if($(this).scrollTop() > target ){
    $('.progress-bar').animate({
      'width': '50%'
    });
  }
});

.progress {
  margin-top: 600px;
}
.target {
  height: 1000px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

<div class="target">
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
      <span class="sr-only">60% Complete</span>
    </div>
  </div>
</div>

Answer 1

请试试这个：

var target = $('.target').offset().top + 1;

var animateProgressBar = (function() {
    var animated = false;
    return function () {
        if (!animated) {
            animated = true;
           $('.progress-bar').animate({
             'width':'50%'
           });
        }
    };
})();

$(document).scroll(function(){
    if( $(this).scrollTop() > target ){
        animateProgressBar();
    }
});

演示： http://jsfiddle.net/s7egm818/

Answer 2

Bootstrap3进度条组件已经附带动画。您可以在更改宽度时将animate()更改为css()。

$('.progress-bar').css({
  'width': '50%'
});

＆＃13;

var target = $('.target').offset().top + 1;

$(document).scroll(function(){
  if($(this).scrollTop() > target){
    $('.progress-bar').css({
      'width': '50%'
    });
  }
});

＆＃13;

.progress {
  margin-top: 600px;
}
.target {
  height: 1000px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

<div class="target">
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
      <span class="sr-only">60% Complete</span>
    </div>
  </div>
</div>

＆＃13;

如果你想通过jQuery animate()在动画中获得更多控制权，那么一个选项就是添加一个你完成动画元素的指示器。

var target = $('.target').offset().top + 1;
var hasScrolled = false; // this is the indicator

$(document).scroll(function(){
  // also check if progress bar has been scrolled
  if($(this).scrollTop() > target && !hasScrolled){
    hasScrolled = true; // set indicator to true to avoid re-animating again
    $('.progress-bar').animate(
      {'width': '50%' },
      {
        duration: 400,
        easing: 'easeInOutQuint' // This easing function is from jquery-ui
      }
    );
  }
});

＆＃13;

var target = $('.target').offset().top + 1;
var hasScrolled = false; // this is the indicator

$(document).scroll(function(){
  // also check if progress bar has been scrolled
  if($(this).scrollTop() > target && !hasScrolled){
    hasScrolled = true; // set indicator to true to avoid re-animating again
    $('.progress-bar').animate(
      {'width': '50%' },
      {
        duration: 400,
        easing: 'easeInOutQuint' // This easing function is from jquery-ui
      }
    );
  }
});

＆＃13;

.progress {
  margin-top: 600px;
}
.target {
  height: 1000px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

<div class="target">
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
      <span class="sr-only">60% Complete</span>
    </div>
  </div>
</div>

＆＃13;

Answer 3

为什么你希望它大于目标offsetTop值，当你设置它从下到上滚动时开始动画。

return DateTime.TryParseExact("Jan 13 2014 1:11PM", "MMM dd yyyy h:mmtt", CultureInfo.InvariantCulture, DateTimeStyles.None, out tmpDateTime);

如何使用jQuery为Twitter Bootstrap Progress栏设置动画

3 个答案: