javascript - 将div向下移动到某一点

我试图使'.pierre'.moveDown一旦图像具有20％的左位置但不起作用。应该发生的事情是，一旦图像的左侧位置为20％，它就需要自行掉落到页面上。 html和css代码位于小提琴中。

这是小提琴的链接
https://jsfiddle.net/Pallonej/0vhc7pqq/

这是我的脚本那不起作用

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

最佳答案

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

代码看起来像在更新的小提琴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>

关于javascript - 将div向下移动到某一点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28976020/