Question

我正在使用iphone之类的滑块。带有滑动按钮的<input type="range">标签。当我将按钮移动到结束时，按钮上的图片必须更改为解锁图片。为此，我将按钮的背景从带锁图标的图片更改为带解锁图标的图片（均在一个精灵图片中）。像这样： $('.btn').css({'background-position': '-62px -104px'}); 但由于某种原因，图片不仅仅是变化，而是像向右滑动而消失，从左侧看到新图片。奇怪的动画效果。我无法找到这种奇怪行为的原因。任何人都可以向我解释为什么这样做，我该怎么办？我不确定，但也许它会有所帮助：滑块使用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();

改变背景而没有滑动效果

2 个答案: