animate css not working - realy

Question

I am trying to animate the following in css. I've read previous posts, but the settimeout doesn't seem to be working, or it doesn't seem to be giving me the intended result.

I am trying to do a simple animation whereby it changes the line height by 0.5 each time, I've tried in a loop, and I've tried manually, but neither works. It just shows me the "final" result, and then if I push the button, doesn't even change anything. Here is an example:

 $(document).ready(function() {
  $("#linespace001").click(function() {

    var crap = 0;

    // this for some stupid reason DOESNT work

    for (i = 1; i <= 3; i++) {

      crap += 1000;

      setTimeout(function() {
        $("#poop").css("line-height", i * 0.5);
      }, crap);

      // this for some stupid reason works

      setTimeout(function() {
        $("#poop").css("line-height", 0.5);
      }, 1000);
      setTimeout(function() {
        $("#poop").css("line-height", 1);
      }, 2000);
      setTimeout(function() {
        $("#poop").css("line-height", 1.5);
      }, 3000);


    }

  });
});

<input type=button id=linespace001 value="Animate button!">
<div id="poop">
  This is a sample test/changing the line height/spacing
  <br>This is a sample test/changing the line height/spacing
  <br>This is a sample test/changing the line height/spacing
  <br>This is a sample test/changing the line height/spacing
  <br>This is a sample test/changing the line height/spacing
  <br>This is a sample test/changing the line height/spacing
  <br>
</div>

correction - the 'manual' copy/paste (3 timeouts) Works. in a loop doesn't. it just 'skips' to the final result. — user6262902, Apr 27 '16 at 18:04
Possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — CBroe, Apr 27 '16 at 18:09
lol, no - not a duplicate - READ what I posted. I read your supposed 'duplicate' - and whomever that is is asking an entirely different question. this is css related using jQuery - that guy seems to be declaring multiple functions. the "only" similarity is that he uses a for loop that goes from i = 0 to 3. READ the question before making fake flags like this. — user6262902, Apr 28 '16 at 13:33

johnniebenson · Accepted Answer · 2016-04-27T20:50:27.057

1

Instead of setTimeout() look at using setInterval()

$(function() {
    var i = 1,
        lineHeight = 0.5;

    $("#linespace001").on("click", function() {
        var heightTimer = setInterval(function() {
            if (i > 3) {
                clearInterval(heightTimer);
                i = 1;
                return false;
            }

            $("#poop").css({"line-height" : (i * lineHeight)});
            i++;
        }, 500);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="linespace001" value="Animate button!">
<div id="poop">
This is a sample test/changing the line height/spacing<br>
This is a sample test/changing the line height/spacing<br>
This is a sample test/changing the line height/spacing<br>
This is a sample test/changing the line height/spacing<br>
This is a sample test/changing the line height/spacing<br>
This is a sample test/changing the line height/spacing<br>
</div>

edited Apr 27 '16 at 20:50

answered Apr 27 '16 at 18:31

johnniebenson

540
3
9

thanks! looks really good - one quick question though. Why doesn't it seem to "reset" if I press the "animate" button a 2nd time? - I.e., I press it once - it animates, which is great (I don't know why setinterval works vs settimeout - I'll have to look into that) - but - why doesn't pushing the button a 2nd time "reset" the line-height to 0? (it only seems to animate once?) THanks! – user6262902 Apr 27 '16 at 20:41
ah - it seems to do this infinitely though? How would I make it so it only does it 3x? (IT seems to execute infinitely?) thanks! – user6262902 Apr 27 '16 at 20:43
thanks! fantastic, works great! pps - if you don't mind - why doesn't the "set timeout" work? My 'feeling' is what I wrote 'should' work - so I don't understand why it doesn't work. But the code you have works great, thanks! – user6262902 Apr 27 '16 at 22:13
The reason `setTimeout()` doesn't work in a `for` loop has to do with closures. If you were to wrap your original `setTimeout()` in an anonymous function and pass in `i` it should work. I find it simpler to just use `setInterval()`. More info: http://stackoverflow.com/questions/20384719/why-does-javascript-settimeout-not-work-in-a-loop – johnniebenson Apr 28 '16 at 14:41
@user6262902, if this helped you can you please accept it as an answer? Thanks! – johnniebenson Apr 28 '16 at 14:47
thanks - was trying to find an 'accept' answer button, finally I think I found it? is it clicking the checkmark? – user6262902 Apr 28 '16 at 15:24
Good to go! Thanks :) – johnniebenson Apr 28 '16 at 15:50

animate css not working - realy

1 Answers1