Question

我的网站上有一个关键图像，点击后向左移动。在那之后我想要一辆车立刻出现在钥匙旁边。下面是粘贴的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

您可以使用动画完整功能来添加第二个图像，如下所示。

＆＃13;

$(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");

    });
 });

＆＃13;

<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>

＆＃13;

Answer 2

没有必要使用if语句导致您只需将if语句中的代码用作动画完成后的回调。

如何在if-else检查div位置之后添加Image？

2 个答案: