javascript - 更改属性后设置新位置

更改image属性后，我想将其向前移动，但是即使使用.css方法，它似乎也没有改变：这是我的JS代码

<script>
window.setTimeout(function(){
$( '#m').append( "<div id='CDT492'  class='plane' style='left: 199px; top:110px;'><div class='dot'><img id='trans'class='plimg' src='{% static 'img/plane3.png' %}'></div><div class='info_wrapper noalert'><div class='callsign'>CDT492 B735</div><div class='info'></div></div></div>" );
$('#arrival_sortable').append("<li class='ui-state-default' id='psFFT972' flightid='FFT972'><div style='padding:5px;'><div class='left callSign'>CDT492</div><div class='left' style='padding-left:10px;'>B735</div><div class='clearfix'></div><div class='left currTaxiway'>D</div><div class='left flightStatus' style='padding-left:10px;'>Landing</div><div class='left gate' style='padding-left:10px;'>B3</div><div class='clearfix'></div></div></li>");
$( "#CDT492" ).animate({ "left": "+=274px" ,"top":"+=170px"},{duration:15000,queue: false,
step: function(now) {
                if (now >= 467) {
                    $('#trans').attr("src","{% static 'img/rot.png' %}");
                    $('#CDT492').animate('top','+=5px');
                }
            } }
        );
    }, 5000);
</script>

最佳答案

为什么使用window.setTimeout？
您是否了解$(document).ready事件（它的简短形式：$(function() { ... });）？
可能是您的代码无法使用，因为DOM尚未准备就绪，并且代码找不到#m或#arrival_sortable元素。
如果您的#CDT492元素没有位置样式，则需要设置它：style='position: relative;。
您想在那里做什么：if (now >= 467)？
我认为，您也需要检查第二个处理程序参数的值（JQuery文档中的tween：step: function(now, tween) { ... }）
您的代码中没有任何css()方法。
检查页面上是否没有具有相同id的元素。


因此，该代码以某种方式对我有效。

$(function() {
$( '#m').append( "<div id='CDT492'  class='plane' style='position: relative; left: 199px; top:110px;'><div class='dot'><img id='trans'class='plimg' src='{% static 'img/plane3.png' %}'></div><div class='info_wrapper noalert'><div class='callsign'>CDT492 B735</div><div class='info'></div></div></div>" );
$( "#CDT492" ).animate({ "left": "+=274px" ,"top":"+=170px"},{duration:15000,queue: false,
step: function(now, tween) {
                if (now >= 467) {
                    $('#trans').attr("src","{% static 'img/rot.png' %}");
                    $('#CDT492').animate('top','+=5px');
                }
            }}
        );
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="m"></div>