改变背景没有滑动效果答案

【问题标题】：Changing background without sliding effect改变背景没有滑动效果
【发布时间】：2013-01-12 21:37:57
【问题描述】：

我正在开发 iphone 之类的滑块。它是带有滑动按钮的<input type="range"> 标签。当我将按钮移动到结束时，锁定图片上的按钮必须更改为解锁图片。为此，我将按钮的背景从带有锁定图标的图片更改为带有解锁图标的图片（都在一张精灵图片中）。像这样： $('.btn').css({'background-position': '-62px -104px'}); 但是由于某种原因，图片不仅发生了变化，而且就像向右滑动并消失了，而从左侧出现了新图片。奇怪的动画效果。而且我找不到这种奇怪行为的原因。谁能向我解释为什么会这样，我该怎么办？我不确定，但也许会有所帮助：滑块使用 Zepto js 而不是常规的 jQuery。

【问题讨论】：

标签： css zepto

【解决方案1】：

听起来您在 .btn 元素上启用了 css 转换。这将导致背景图像以滑动效果过渡。

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

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

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

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：