如何使用间隔循环 css 值

Question

我正在尝试使用间隔添加 css 值，当我尝试使用附加运行时效果很好。但是为什么当我尝试像下面的代码那样增加 css 值时它不起作用。

如何增加 css 值的间隔？

$(document).ready(function(){
  var imgBg = $('.img-bg');
  var addBlur = $(imgBg).find('img');

  var blurVal = 0; 
  var filterBlur = {
    'filter' : 'blur('+blurVal+'px)',
    '-webkit-filter': 'blur('+blurVal+'px)',
    '-moz-filter': 'blur('+blurVal+'px)',
    '-o-filter': 'blur('+blurVal+'px)',
    '-ms-filter': 'blur('+blurVal+'px)'
  };
  
  //$(addBlur).css(filterBlur);
  
function blurLoop(){
  blurVal++;
  //$('.container').append('<p>test '+blurVal+'</p>');
  $(addBlur).css(filterBlur);
}
  
  var interval = setInterval(function(){
    var test = blurLoop();
    if(blurVal >= 5){
      clearInterval(interval);
    }
  },1000);
});

.container {
  width: 100%;
  paddding: 0 15px;
}

.header {
  position: relative;
  overflow: hidden;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    <div class="img-bg">
      <img src="https://unsplash.it/200/300?image=0" alt="" />
      <img src="https://unsplash.it/200/300?image=0" alt="" />
    </div>
  </div>
</div>

Answer 1

$(document).ready(function(){
  var imgBg = $('.img-bg');
  var addBlur = $(imgBg).find('img');

  var blurVal = 0; 
 
  
  //$(addBlur).css(filterBlur);
  
function blurLoop(){
  blurVal++;
  
   var filterBlur = {
    'filter' : 'blur('+blurVal+'px)',
    '-webkit-filter': 'blur('+blurVal+'px)',
    '-moz-filter': 'blur('+blurVal+'px)',
    '-o-filter': 'blur('+blurVal+'px)',
    '-ms-filter': 'blur('+blurVal+'px)'
  };
  //$('.container').append('<p>test '+blurVal+'</p>');
  $(addBlur).css(filterBlur);
}
 
  var interval = setInterval(function(){
    var test = blurLoop();
  
    if(blurVal >= 5){
      clearInterval(interval);
    }
  },1000);
});

.container {
  width: 100%;
  paddding: 0 15px;
}

.header {
  position: relative;
  overflow: hidden;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    <div class="img-bg">
      <img src="https://unsplash.it/200/300?image=0" alt="" />
      <img src="https://unsplash.it/200/300?image=0" alt="" />
    </div>
  </div>
</div>

如何使用间隔循环 css 值

how to loop css value with interval

jquery

intervals