javascript - 模态关闭时重置jquery动画

Question

我有一个瓶子被填充到数据库指定点的动画。当模式打开时，动画功能开始，但是当我关闭模式时，动画继续。我试图在模式关闭时重置动画功能，以便当我再次打开它时动画从头开始。

<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);
    }
});

模态框是 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 -->

如有任何帮助，我们将不胜感激!

Answer 1

您可以使用Bootstrap's "modal show event"至 reload your animation image每次打开模式时:

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