在没有滑动效果的情况下更改背景

Question

我在iphone上工作，就像slider。它是带滑动按钮的<input type="range">标签。当我将按钮移动到末端时，必须将按钮上的锁定图片更改为解锁图片。为此，我将按钮的背景从带锁图标的图片更改为带解锁图标的图片(都在一个精灵图片中)。就像这样：$('.btn').css({'background-position': '-62px -104px'});，但由于某种原因，图片不仅仅是变化，它就像滑到右边消失了，从左边出现了新的图片。奇怪的动画效果。我找不到这种奇怪行为的原因。有人能给我解释一下为什么会这样吗?我能做些什么？我不确定，但也许它会有所帮助: slider使用Zepto js而不是普通的jQuery。

Answer 1

这听起来像是在.btn元素上激活了css转换。这将导致背景图像过渡到具有滑动效果的地方。

尝试将以下css添加到元素中：

.btn {
    -webkit-transition: none;
       -moz-transition: none;
         -o-transition: none;
            transition: none;
}

注意，如果代码的任何其他部分依赖于处于活动状态的转换，这可能会产生意想不到的后果。

有关更多信息，请参阅此处http://www.w3.org/TR/css3-transitions/#transition-shorthand-property

Answer 2

试着这样做：

$('.btn').css({'background-position': 'old position'}).hide();
$('.btn').css({'background-position': 'new position'}).show();