[英]“Math.abs(parseInt($(this).css('left')” returning a different value than expected
示例: jsfiddle
<style>
#slider-outer {
width: 400px;
overflow: hidden;
}
#slider-inner {
width: 1200px;
overflow: visible;
height: 200px;
position: relative;
}
#slider-inner div {
background: ;
width: 200px;
height: 200px;
float: left;
}
.a{background: red;}
.b{background: green;}
.c{background: blue;}
.d{background: yellow;}
.e{background: grey;}
.f{background: coral;}
.g{background: olive;}
</style>
<div id="slider-outer">
<div id="slider-inner">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
</div>
</div>
$(document).ready(function(){
$('#slider-inner').click(function(){
var scrollAmount = $(this).width() - $(this).parent().width();
var currentPos = Math.abs(parseInt($(this).css('left')));
var remainingScroll = scrollAmount - currentPos;
var nextScroll = Math.floor($(this).parent().width() / 2);
if (remainingScroll < nextScroll) {
nextScroll = remainingScroll;
}
if (currentPos < scrollAmount) {
$(this).animate({'left':'-=' + nextScroll}, 'slow');
console.log(currentPos)
}
else {
$(this).animate({'left':'0'}, 'fast');
}
});
});
我正在学习jQuery和一些javascript的过程中,遇到了一个简单滑块的示例,并遍历了代码行并了解了它们的工作原理。 除了var = currentPos
返回到控制台的值外,我了解所有内容。
该值在第一次单击时返回0,这使我感到困惑,因为我认为它应该是-200px
因为滑块内部向左移动了-200px
?
有人可以解释为什么变量将其值返回到控制台吗?
谢谢
console.log
语句不等待动画完成,即使动画完成, currentPos
也将保持为0,因为动画不会改变变量的值。
一种更好的理解差异的方法是:
if (currentPos < scrollAmount) {
$(this).animate({'left':'-=' + nextScroll}, 'slow', function(){
console.log("After the animation has completed: " + $(this).css('left'));
});
console.log("Before the animation has completed: " + $(this).css('left'))
}
.animate()
的第三个参数是一个匿名函数,它将在动画完成时执行。
这将输出:
Before the animation has completed: 0px
After the animation has completed: -200px
希望这更符合您的期望。
如果查看#slider-inner
的CSS规则,您会发现它没有明确的left
设置。
#slider-inner {
width: 1200px;
overflow: visible;
height: 200px;
position: relative;
}
由于没有显式的left
值,因此默认为auto
。 由于#slider-inner
是相对定位的,并且也未指定right
属性, 因此不会接收offset 。
这意味着left
有效为0px
(这是您在第一次单击$(this).css('left')
时得到的结果)。 var currentPos = Math.abs(parseInt($(this).css('left')));
将该值解析为绝对整数0
,并将其存储在变量currentPos
。 如果您查看之后的所有代码:
var remainingScroll = scrollAmount - currentPos;
var nextScroll = Math.floor($(this).parent().width() / 2);
if (remainingScroll < nextScroll) {
nextScroll = remainingScroll;
}
if (currentPos < scrollAmount) {
$(this).animate({'left':'-=' + nextScroll}, 'slow');
console.log(currentPos)
}
else {
$(this).animate({'left':'0'}, 'fast');
}
});
});
那里没有任何内容为currentPos
分配新值,因此该值保持为0
。 将字符串解析为整数后得到的零是文字,而不是对.left
当前值的.left
。 即使它是对DOM元素.left
属性的实时引用,也不是-200
, .animate
方法异步运行,在它之后立即调用console.log
,它可能向左移动了几个像素在调用.animate
和控制台输出之间的时间内,但肯定不是整个200像素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.