Question

我试图制作＆＃39; .pierre＆＃39; .moveDown一旦图像左侧位置为20％但不起作用。应该发生的事情是，一旦图像的左侧位置为20％，它需要自己落到页面上。 html和css代码位于小提琴中。

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

这是我的脚本无效

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

Answer 1

您对位置的检查应该在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>

Answer 2

您需要使用offset属性，而不是position

以下是您的问题示例，其中包含用于说明概念的额外功能：

    var position =  $(".pierre").offset();

$(document).keydown(function(e) {
 var y= $(".pierre").offset().top;
      var x = $(".pierre").offset().left;
    if (e.keyCode == 37) { // left

      $("#position").html("X: "+x+" , Y:"+y);


        $(".pierre").animate({
            left: "-=30"
        });


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



if (x<=200) {

     $(".pierre").animate({
            top: "+=30"
        });
}


});

这是JSFiddle

Answer 3

正如Alundra所说，你应该使用.offset()。您可以向.animate函数添加回调，该函数将在动画完成后执行。如果位置正确，您可以调用停止，以便停止所有当前（和将来）的动画，因此在您按下左键时，它不会再向左移动。然后你可以再次动画它让它落下。新的js代码（为了便于阅读，我删除了第二个左右按钮部分）：

//move person
$(document).keydown(function(e) {
    if (e.keyCode == 37) { // left
        $(".pierre").animate({
            left: "-=30"
        }, function(){
            if($('.pierre').position().left < window.innerWidth/5){
                $('.pierre').stop(true);
                $('.pierre').animate({
                    top: "+=1000"
                });   
            }
        });
    }
});

将div降低一次超过某一点

3 个答案: