Question

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

var web_name;
function updateDatabase()
{
    code2 = document.getElementById("content-link2").innerHTML;
    var name = document.getElementById("website_name").value;
    var newCode = document.getElementById('code').value = code2;
    var newName = document.getElementById('name').value = name;
    web_name = ($('#website_name').val());
        console.log(newName);
        console.log(newCode);
}
function submitImage(){
    var fd = new FormData($("#upload_form")[0]);
        fd.append( 'img', $('#img') );

$.ajax({
      url:'template',
      data: fd,
      dataType:'json',
      async:false,
      type:'post',
      processData: false,
      contentType: false,
      success: function (data) {
        $("#image").attr("src", data.url);
      }
    });
}

Route::get('template', 'BuilderController@templates');
Route::post('template', 'BuilderController@postDB');
Route::post('template', 'BuilderController@testing');

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

Answer 1

如果你想在有人滚动传递时重置动画，你需要删除元素的style属性，如下所示：

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

Check out the fiddle here

Answer 2

你可以做这样的事情

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

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

Answer 3

你有一个很好的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>

JS

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

这是一个简单的示例，但您可以按照自己的方式进行调整

sample

Answer 4

您必须在下一行添加“滚动”（）窗口＆＃39;选择。这是您的解决方案：

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

}）;

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

4 个答案: