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

在我的页面上我有一定的动画。当我滚动整个页面时，我想确保动画从一开始就开始，而不是在我的页面上完成动画。检查了这一点： 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>

来源

2017-03-07 newbie_girl

如果要重置动画当有人滚动通过它，你需要删除的元素像这样的风格属性：

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

Check out the fiddle here

来源

2017-03-07 12:53:35 Zorken17

这真的在一个例子中有效。不过，我正在处理真正的页面问题。此条件不可识别：if（$（document）.scrollTop（）<$（'＃section-one'）。offset（）。top || $（document）.scrollTop（）== $（'＃section- 3'）。偏移（）。顶部）。任何想法呢？ –

你也许应该用$（window）去代替，或者展示你真实的代码。你会得到什么样的错误？ – Zorken17

啊，我已经改变了条件的顺序，我把第一部分放在第三部分，然后是第一部分。现在它的工作！ –

你可以做这样的事情

$("#animation") 
    .animate({left: '250px'}) 
    .animate({left: '0px'});

链的另一个动画重置块的位置

来源

2017-03-07 12:23:10 Vikram

谢谢。不过，我的例子只是我的案例的简化版本。我已经有了这样的东西，我的问题指的是别的东西。所以我想要的是确保每次滚动到另一个不包含动画的div时，当我滚动回包含动画的div时，该动画将从头开始。我认为这将包括滚动，高度方法，但我无法应用它们。 –

然后，您可以跟踪包含动画框的div的滚动位置，并且每当DIV从顶部或底部进入视图时，都会重置动画框的位置。 – Vikram

你有一个很好的JS库，只是你所需要的。它被称为smoove。

CSS

<style> 
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%; 
    left: 300px; 
    opacity: 1 !important; 
} 
</style>

HTML

<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" data-move-x="-300px">Block</div> 
</div> 
<div id="third" class="third"></div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js"></script>

<script> 
$(document).ready(function(){ 
    $('.block').smoove({offset:'10%'}); 
}); 
</script>

下面是一个简单的例子，但你可以tweek它自己的方式

sample

来源

2017-03-07 12:45:50 kekacbre

您必须添加滚动（）上“窗口”选择器的下一行。这是您的解决方案：

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

}）;

来源

2017-03-07 12:58:08 andfra

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

回答

相关问题