javascript - 滚动到另一个元素后从头开始动画

Question

在我的页面上我有一些动画。当我滚动整个页面时，我想确保动画从头开始，而不是已经在我的页面上完成动画。 看一下这个: http://jsfiddle.net/ykto7uu9/49/

 $(document).ready(function(){
        $("button").click(function(){
            $("#animation").animate({left: '250px'});
        });
    });

html,body {
            height: 100%;
     }
    
    .first {
      background-color: green;
      height: 100%;
      width: 100%;
    }
    
    .second {
      background-color: yellow;
      height: 100%;
      width: 100%;
    }
    
    .third {
      background-color: red;
      height: 100%;
      width: 100%;
    }
    
    .button {
      position: absolute;
      margin-top: 50%;
    }
    
    .animation {
      background:#98bf21;
      height:100px;
      width:100px;
      position:absolute;
        margin-top: 20%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first" class="first"></div>
    <div id="second" class="second">
    <button id="button" class="button">Start Animation</button>
    Click on the button Start Animation!<br>
    Now every time I scroll up to green or red div, I want Block to be placed at the first position before animation.
    <div id="animation" class="animation">Block</div>
    </div>
    <div id="third" class="third"></div>
   

Answer 1

如果你想在有人滚动时重置动画，你需要像这样删除元素的样式属性:

$('#animation').removeAttr('style')

Check out the fiddle here