javascript - 如何在 if-else 检查 div 位置后添加图像？

Question

我的网站上有一个关键图像，单击它会向左移动。在那之后，我想要一辆车立即出现在 key 旁边。下面是粘贴的 jQuery 代码。

在下面的代码之后，

$(document).ready(function(){
    $("#key").click(function(){
        $("#key").animate({left: '-1000px'},"slow");
        $("#key").animate({width: '16%'},"slow");
        $("#key").animate({top: '190px'},"slow");
        $("#key").css({transform: 'rotate(-90deg)'},"slow");

    });
});

我要执行下面的内容。

$(document).ready(function(){ 
    var n = $("#key").position();    
    if (n.top=="190px" && n.width=="16%" && n.left=="-1000px") {        
        $(".car").prepend('<img id="car" src="assets/car_fin.png" />');
    }
});

Answer 1

您可以使用 animate complete 函数来添加您的第二张图片，如下所示。

$(document).ready(function(){
    $("#key").click(function(){
        $("#key").animate({left: '-1000px', width: '16%', top: '190px'},"slow", function() { 
           // Animation complete.                      
           $(".car").prepend('<img id="car" src="http://via.placeholder.com/180x180" />');
        });
        $("#key").css({transform: 'rotate(-90deg)'},"slow");

    });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js" integrity="sha256-lnH4vnCtlKU2LmD0ZW1dU7ohTTKrcKP50WA9fa350cE=" crossorigin="anonymous"></script>     
<img id="key" style="position:relative;margin-left:200px;" src="http://via.placeholder.com/140x140">
<div class="car">
  car image
</div>