如何连续减去两个移动div的左边?

时间:2015-01-07 10:30:55

标签: jquery html css

我正在尝试减去两个移动div的left值,我可以使用left连续计算setInterval但是当我尝试减去它们的值时,它会显示错误{ {1}}

http://jsfiddle.net/mmtdv9ew/2/

HTML

NaN

CSS

<p id="z"></p><p id="x"></p><p id="y"></p>
<div id="a"></div>
<div id="b"></div>

JQuery

#a{
-webkit-animation:mv 10s infinite;
left:250px;
width:100px;
height:100px;
background:green;
position:absolute;
}

#b{
position:absolute;
-webkit-animation:mvs 10s infinite;
z-index:10;
width:100px;
height:100px;
background:red;
}

@-webkit-keyframes mv{
0%{left:100px;}
50%{left:500px;}
100%{left:250px;}
}

@-webkit-keyframes mvs{
0%{left:0;}
50%{left:600px;}
100%{left:0px;}
}

1 个答案:

答案 0 :(得分:3)

错字:用var b=parseInt($('#x').text() , 10);

中的y替换x

请参阅更新的小提琴:http://jsfiddle.net/mmtdv9ew/3/

再次阅读,并且由于您的代码过于复杂,我可能错过了精确的逻辑错误

简化代码(包含在加载页面元素后执行的函数中):

$(function() {
    setInterval(function(){
        var x = parseInt($('#a').css('left'), 10);
        var y = parseInt($('#b').css('left'), 10);
        var c = x - y ;
        $('#x').text(c);
    });
});