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

为什么使用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>

更改属性后设置新位置

1 个答案: