Jquery动画不使用变量

Question

我正在尝试使用 Jquery animate left 函数为框内的小圆圈设置动画。当我传递硬编码值时它工作正常。如下图所示，如果我从框宽中减去圆宽，则结果为 474。

    
        $(document).ready(function(){
             $("#start_a").toggle(function(){
                if ($("#start_a").html() === 'Roll'){
                    $("#start_a").html("Stop"); 
                    function start(){
                        $("#circle").animate({left: "+=474"},"slow",function(){
                            $("#circle").animate({left: "-=474"},"slow",function(){
                                start();
                            });
                        }); 
                    }
                    start();
                }
             },    
             function(){
                if ($("#start_a").html() === 'Stop'){
                    $("#start_a").html("Roll"); 
                    $("#circle").stop();
                    $("#circle").css("left", "initial");
                }
             });
        });       

为了使其动态化，我尝试通过传递变量来制作相同的动画，如下所示。 （仅粘贴新的 Jquery）。

$(document).ready(function(){
  
           var roll = $("#box").width() - $("#circle").width();
                 var effect = {};
                 var reverse = {};
                 effect['left'] = roll;
                 reverse['left'] = -roll;
                 $("#start_a").toggle(function(){
                    if ($("#start_a").html() === 'Roll'){
                        $("#start_a").html("Stop"); 
                        function start(){
                            $("#circle").animate(effect,"slow",function(){
                                $("#circle").animate(reverse,"slow",function(){
                                    start();
                                });
                            }); 
                        }
                        start();
                    }
                 },    
                 function(){
                    if ($("#start_a").html() === 'Stop'){
                        $("#start_a").html("Roll"); 
                        $("#circle").stop();
                        $("#circle").css("left", "initial");
                    }
                 });
            });

圆没有像预期的那样动画，它超出了框的边界。有人可以告诉我可能是什么问题吗？提前致谢！

下面是我的 HTML/CSS

<div id="box">
            <div id="circle"></div>           
        </div>
        <div id="box2">
            <button id="start_a" >Roll</button>
<!--            <button id="stop_a">Stop</button>-->
        </div>

<style>    
        #circle {
	    width: 20px;
	    height: 20px;
	    background: black;
	    border-radius: 50px;
            left: 0px;
            position: absolute;
        } 
        
        #box{
            border: 3px solid green;
            background-color: white;
            margin-left: 400px;
            margin-top: 100px;
            width: 494px;
            min-height: 300px;
            position: relative;
        }
        #box2{
            /*border: 3px solid red;*/
            margin-left: 400px;
            /*margin-top: 100px;*/
            width: 494px;
            min-height: 50px;
            position: relative;
        }
        #start_a{
            margin-left: 200px;
            top: 0px;
            width: 100px;
            height: 50px;
            text-align: center;
            position: relative;
        }
        #stop_a{
            /*margin-left: 720px;*/
            /*top: 0px;*/
            width: 100px;
            height: 50px;
            text-align: center;
            position: relative;
        }
        </style>

Answer 1

好的，请尝试：

$(document).ready(function(){
  
  var roll = $("#box").width() - $("#circle").width();
  var effect = {};
  var reverse = {};
  effect['left'] = roll;
  reverse['left'] = 0;
  $("#start_a").click(function(){
    if ($("#start_a").html() === 'Roll'){
      $("#start_a").html("Stop"); 
      start();
    }else{
      $("#start_a").html("Roll"); 
      $("#circle").stop();
      $("#circle").css("left", "initial"); 
    }
  })   

  function start(){
    $("#circle").animate(effect,"slow",function(){
      $("#circle").animate(reverse,"slow",function(){
        start();
      });
    }); 
  }
});

#circle {
	    width: 20px;
	    height: 20px;
	    background: black;
	    border-radius: 50px;
            left: 0px;
            position: absolute;
        } 
        
        #box{
            border: 3px solid green;
            background-color: white;
            margin-left: 100px;
            margin-top: 100px;
            width: 494px;
            min-height: 300px;
            position: relative;
        }
        #box2{
            /*border: 3px solid red;*/
            margin-left: 400px;
            /*margin-top: 100px;*/
            width: 494px;
            min-height: 50px;
            position: relative;
        }
        #start_a{
            margin-left: 0;
            top: 0px;
            width: 100px;
            height: 50px;
            text-align: center;
            position: relative;
        }
        #stop_a{
            /*margin-left: 720px;*/
            /*top: 0px;*/
            width: 100px;
            height: 50px;
            text-align: center;
            position: relative;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <div id="circle"></div>           
</div>
<div id="box2">
  <button id="start_a" >Roll</button>
</div>