javascript - 如何停止窗口底部的图像？

Question

$(".raindrop1").clone().removeClass("raindrop1").addClass("raindropDelete").appendTo("body").css({
  left: $(".shape").position().left - 29.50,
  top: $(".shape").position().top + 1,
  position: "relative"
}).animate({
  top: "+=1000"
}, function() {
  $(".raindropDelete").remove();
});

body {
  background: rgb(0, 0, 0);
}

.shape {
  border-radius: 50px;
  width: 10px;
  height: 10px;
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shape" onclick="curse()"></div>
<img src='http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width="15px" class="raindrop1">

我得到了这段代码，但我似乎无法让它按照我想要的方式工作。我想让图像落到屏幕底部，但在滚动条出现之前删除自身。

JS:

$(".raindrop1").clone().removeClass("raindrop1").addClass("raindropDelete").appendTo("body").css({
                left: $(".shape").position().left - 29.50,
                top: $(".shape").position().top + 1,
                position: "relative"
            }).animate({top :"+=1000"}, function() {
                $(".raindropDelete").remove();
            });

HTML:

<div class = "shape" onclick = "curse()"></div>
<img src = 'http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width = "15px" class = "raindrop1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

和 CSS:

body{
    background: rgb(0, 0, 0);
}

.shape{
    border-radius: 50px;
    width: 10px;
    height: 10px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
}

我做错了什么吗？

JSFiddle

Answer 1

您正试图在动画完成时用于执行某些操作的函数中删除您的 droplet。所以液滴动画仍在继续，直到它从顶部达到+1000px。

要在它落到窗口下方之前将其移除，可以对 animate 方法使用 step 选项。它所做的是查看动画期间发生的情况，如果液滴落在边缘以下，您可以将其移除。

Step Function

The second version of .animate() provides a step option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element being animated.

• now: the numeric value of the property being animated at each step

• fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated.

所以我所做的是创建一个阶跃函数，每个阶跃函数都会检查液滴是否到达了窗口的边缘。如果满足条件 - 只需移除液滴

$(".raindrop1").clone()
	.removeClass("raindrop1")
  .addClass("raindropDelete")
  .appendTo("body").css({
     left: $(".shape").position().left - 29.50,
     top: $(".shape").position().top + 1,
     position: "relative"
    })
    .animate({top :"+=100"}, 
             {step: function(now) {
               if (now+50 >= $(window).height())
                $(".raindropDelete").remove();
               }
              },
     function() {});

body{
    background: rgb(0, 0, 0);
}

.shape{
    border-radius: 50px;
    width: 10px;
    height: 10px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "shape" onclick = "curse()"></div>
  <img src = 'http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width = "15px" class = "raindrop1">