reset jquery animation when modal closes

Question

I have an animation of a bottle being filled up to a point from specified from the database. When the modal is opened the animation function starts, however when I close the modal the animation continues. I am trying to get the animation function to reset when the modal closes so that when I open it again the animation starts from the beginning.

<script>
$(document).ready(function() {
    $("#bo2").hide();
    $("#bo3").hide();
    $("#go").on("click", go);
    var val;
    var o;
    var t; 
    var cnt=1;
function go(){
    val=<?php echo $price; ?> // Value of small bottle
    o=<?php echo $total_juice_dollars; ?>;

    setTimeout(function(){ //fill bottle 1
        if(o<=val){
            t=o/val*120;
            $('#fillColor').animate({top: -t}, 2000, function () {
                done();
            })
            o=0;
        }else{
            t=120;
            $('#fillColor').animate({top: -t}, 2000, function () {
            })
            o=o-val;
            o = o.toFixed(2);
        }
    },500);
    setTimeout(function(){ //fill bottle 2
        if(o>0) {
            $("#bo2").show();
            if (o > 0 && o <= val) {
                t = o / val * 120;
                $('#fillColor-2').animate({top: -t}, 2000, function () {
                    done();
                })
                o=0;

            }else {
                t = 120;
                $('#fillColor-2').animate({top: -t}, 2000, function () {
                })
                o = o - val;
                o = o.toFixed(2);
            }
        }
    },1000);
    setTimeout(function(){ //fill bottle 3
        if(o>0) {
            $("#bo3").show();
            if (o > 0 && o < val) {
                t = o / val * 120;
                $('#fillColor-3').animate({top: -t}, 2000, function () {
                    done();
                })
                o=0;
            }else{
                t = 120;
                $('#fillColor-3').animate({top: -t}, 2000, function () {
                })
            }
            setTimeout(function(){
                if(o>0){
                    $("#rep").html("<div id='bigo' style='max-height:360px;max-width:130px;overflow:hidden;'> <img src='../plugins/bottleAnimation/url.png' style='position:relative;top:0px;left:0px;z-index:1;float:left;max-height:360px' />  <img src='../plugins/bottleAnimation/g.gif' id='big' style='height:360px;position:relative;top:0px;left:0px;z-index:-.5;float:left;' /></div>");
                    document.getElementById("rep").style.marginLeft = "220px";
                     t = 240;
                    $('#big').animate({top: -t }, 2000, function () {
                    })
                    o = o - val;
                    o = o.toFixed(2);
                    setTimeout(function(){
                        if(o>0){
                            multiply();
                        }
                    },2000);
                }
            },2000);
        }
    },2000);
}
function multiply2(){
alert(o);
}
    function multiply() {
        setTimeout(function(){

            $("#rep").html("<div id='bigo' style='max-height:360px;max-width:130px;overflow:hidden;'> <img src='../plugins/bottleAnimation/url.png'  style='max-height:360px;position:relative;top:0px;left:0px;z-index:1;float:left;' />  <img src='../plugins/bottleAnimation/g.gif' id='big' style='height:360px;position:relative;top:0px;left:0px;z-index:-.5;float:left;' /></div>");

            if(o>=0) {    
                $("#cuh").html("<h1 class='img-circle' style='background-color: rgba(29,29,29,0.5); width: 80px; height:80px; text-align: center; padding-top:18px;'>"+cnt+"</h1>");
                if (o > 0 && o < (val*3)) {
                    t = (o / (val*3)) * 240;
                    $('#big').animate({top: -t }, 2000, function () {
                        done()
                    })
                    o=0;
                }else {
                    t = 240;
                    $('#big').animate({top: -t }, 2000, function () {
                    })
                    o = o - (val*3);
                    o = o.toFixed(2);
                    cnt++;
                }
                setTimeout(function(){
                    if(o>0){
                        multiply();
                    }
                },2000);
            }
        },800);
    }
});

The Modal is a basic one from bootstrap

<div class="modal fade" id="animation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"><?php echo $first_name; ?> <?php echo $last_name; ?></h4>
            </div>
            <div class="modal-body text-center">
                <div class="panel panel-default">
                   <div class="panel-heading">
                   <h4>Total CVR Bucks Available: <span class="text-primary">$<?php echo $total_juice_dollars; ?></span></h4>
                    </div>
                    <div class="panel-body" id="animatBody">
                        <div id="cuh" style=" z-index:100; position: absolute; left:280px; top:260px; color:white;"></div>
                        <div id="rep"   style="margin-left:150px;">
                            <div class="row" id="bottles">
                                <div id="bo1" class="col-sm-4" style="max-height:200px;max-width:80px;overflow:hidden; margin-left: 10px">
                                    <img src="../plugins/bottleAnimation/s.png" style="max-height:200px;position:relative;top:0px;left:0px;z-index:1;float:left;" />
                                    <img src="../plugins/bottleAnimation/g.gif" id="fillColor" style="height:200px;max-width:200px;position:relative;top:0px;left:0px;z-index:-.1;float:left;" />
                                </div>
                                <div id="bo2"  class="col-sm-4" style="max-height:200px;max-width:80px;overflow:hidden;">
                                    <img src="../plugins/bottleAnimation/s.png" style="max-height:200px;position:relative;top:0px;left:0px;z-index:1;float:left;" />
                                    <img src="../plugins/bottleAnimation/g.gif" id="fillColor-2" style="height:200px;max-width:200px;position:relative;top:0px;left:0px;z-index:-.1;float:left;" />
                                </div>
                                <div id="bo3" class="col-sm-4" style="max-height:200px;max-width:80px;overflow:hidden;">
                                    <img src="../plugins/bottleAnimation/s.png" style="max-height:200px;position:relative;top:0px;left:0px;z-index:1;float:left;" />
                                    <img src="../plugins/bottleAnimation/g.gif" id="fillColor-3" style="height:200px;max-width:200px;position:relative;top:0px;left:0px;z-index:-.1;float:left;" />
                                </div>
                            </div>
                        </div>
                    </div><!-- /.panel-body -->
                </div><!-- /.panel -->
            </div>
            <div class="modal-footer">
                <button id="back" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Any help would be appreciated!

If you close out of the modal why not just reset the modal value's to what they were at the start? Because your animation may be running, but since the values have already been set it just doesn't look like it — Adjit, Jul 28 '16 at 20:59
Ive tried that and when I reopen the modal the animation will look like it should for a second and then jump to a later point in the function. I tried making an on click for the back button that would reset all the styles and values, but it didnt seem to work. — JonW, Jul 28 '16 at 21:04
Take a look at either `.finish()` or `.stop()` and run those before your animation like - `$(selector).stop(true, true).animate({...});` this will make sure that any previous animations have concluded before trying to run this next one. https://api.jquery.com/finish/ https://api.jquery.com/stop/ — Adjit, Jul 28 '16 at 21:11
I tried adding .stop() and .finish() before each animaion and it still continues like normal. It will not reset. I also tried making the .on click a function and adding the .stop there but still no change. — JonW, Jul 28 '16 at 21:27
Well, I think your best option would probably be using CSS3 to control the animations and then `jQuery` to add/remove classes. That would most likely be the most stable / reliable. — Adjit, Jul 28 '16 at 22:20
Thats a good Idea, I will re work the animation then. Thank you — JonW, Jul 28 '16 at 22:27

rphv · Answer 1 · 2016-07-28T23:46:27.700

You could use Bootstrap's "modal show event" to reload your animation image each time the modal is opened:

var timeout1;
var timeout2;

$('#animation').on('show.bs.modal', function() {
  $("#b1").animate({ "left": "+=300px" }, 5000 );
  timeout1 = setTimeout(function(){
      $("#b2").animate({ "left": "+=300px" }, 5000 );
  }, 1000)
  timeout2 = setTimeout(function(){
      $("#b3").animate({ "left": "+=300px" }, 5000 );
  }, 2000)
});

$('#animation').on('hidden.bs.modal', function() {
  // cancel any pending timeouts
  clearTimeout(timeout1);
  clearTimeout(timeout2);
  // stop running animations
  $("#b1").stop( true, true );
  $("#b2").stop( true, true );
  $("#b3").stop( true, true );
  // reset to original positions
  $('#b1').css("left", "50px");
  $('#b2').css("left", "50px");
  $('#b3').css("left", "50px");
});

.block {
    position: relative;
    background-color: #abc;
    left: 50px;
    width: 90px;
    height: 90px;
    margin: 5px;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button type="button" id="modalButton" data-toggle="modal" data-target="#animation">Open Modal</button>

<div class="modal fade" id="animation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body text-center">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4>Animation: <span class="text-primary"></span></h4>
          </div>
          <div class="panel-body" id="animatBody">
            <div id="cuh" style=" z-index:100; position: absolute; left:280px; top:260px; color:white;"></div>
            <div id="rep" style="">
              <div class="row" id="bottles">
                <div id="bo1" class="col-sm-4" style="">
                  <div class="block" id="b1"></div>
                  <div class="block" id="b2"></div>
                  <div class="block" id="b3"></div>
                </div>
              </div>
            </div>
          </div>
          <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
      </div>
      <div class="modal-footer">
        <button id="back" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

I get the same sort of result. The animation jumps around but doesnt restart. — JonW, Jul 28 '16 at 21:48
Sorry, I misunderstood your animation - I thought you were working with animated GIFs. First, I think you'll want to trigger the animation to start when the modal is opened. Then, when the modal is closed, you'll need to `.stop()` any animations in progress, as well as call `clearTimeout()` on any of the pending animations you've set using `setTimeout()`. See my updated code for an example. — rphv, Jul 28 '16 at 23:44

reset jquery animation when modal closes

1 Answers1