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

Question

更改图像属性后，我想将其向前移动，但似乎即使在使用 .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>

Answer 1

1. 为什么要使用window.setTimeout？你知道 $(document).ready 事件吗(有一个简短的形式:$(function() { ... });)？

2. 可能是因为 DOM 尚未准备好并且代码无法找到 #m 或 #arrival_sortable 元素，所以您的代码无法正常工作。

3. 如果您的 #CDT492 元素没有位置样式，您需要设置它:style='position: relative;。

   <

4. 你想在那里做什么:if (now >= 467)？我认为，您也需要检查第二个处理程序参数的值(JQuery 文档中的tween:step: function(now, tween) { ... })

5. 您的代码中没有任何 css() 方法。

6. 检查页面上是否没有具有相同 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>