javascript - 将 div 向下移动一次超过某个点

Question

一旦图像的左侧位置为 20% 但它不起作用，我将尝试制作 '.pierre' .moveDown。应该发生的是，一旦图像有 20% 的左侧位置，它就需要自己从页面上掉下来。 html 和 css 代码位于 fiddle 中。

这是 fiddle 的链接 https://jsfiddle.net/Pallonej/0vhc7pqq/

这是我的脚本，它不起作用

if ($('.pierre').css('left') == '20%') {
    $(this).moveDown();
}

Answer 1

您对位置的检查应该在 keydown 处理程序内部，然后将 $.css(..) 中的值解析为整数以进行比较。

代码可能看起来像更新后的 fiddle here .

我还为您的动画添加了stop 以避免动画排队。也许在没有动画的情况下执行此操作会更好。

使用 $(document).width() * 0.2 可以计算下落位置的相对位置。

如果您想在盒子掉落后隐藏或移除它，您可以向动画添加一个完成回调来执行您要查找的操作。在演示中，我隐藏了盒子。

//move person
$(document).keydown(function (e) {
    if (e.keyCode == 37) { // left
        $(".pierre").stop(true,true).animate({
            left: "-=30"
        });

    } else if (e.keyCode == 37) { // right
        $(".pierre").stop(true,true).animate({
            left: "-=30"
        });
    }

    //console.log($('.pierre').css('left'));
    if (parseInt($('.pierre').css('left')) <= $(document).width() * 0.2 ) {
        //$(this).slideDown();
        $('.pierre').animate({
            top: "+=" + $(document).height()
        }, function() {
            $(this).hide();
        });
    }
});

//fall
/*if ($('.pierre').css('left') === '+5px') {
    //$(this).slideDown();
     $(this).animate({
            left: "-=30"
        });
}*/

.pierre {
    height:15%;
    width:15%;
    background: black;
    position: absolute;
    left: 90%;
    top: -.7%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pierre'></div>