how to loop css value with interval

Question

I'm trying to add css value with interval, when I try run with append it works well. But why it doesn't work when I try to increase css value like my code below.

How I can increase css value with interval?

$(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>

Sarika Koli · Accepted Answer · 2017-03-30 04:51:47Z

2

$(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>

answered Mar 30, 2017 at 4:51

Sarika Koli

7936 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rnDesto Over a year ago

I see, the css should be store into function, so it will loop within it. Thank's for the help

Collectives™ on Stack Overflow

how to loop css value with interval

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related