Changing background without sliding effect

Question

I'm working on iphone like slider. It is <input type="range"> tag with button for sliding. When I'm moving the button to the end lock picture on the button must be changed to unlock picture. For this I'm changing background of the button from picture with lock icon to picture with unlock icon (both in one sprite pic). Like this: $('.btn').css({'background-position': '-62px -104px'}); But for some reason picture not just changes, it's like sliding to the right and disappears and from left side coming the new picture instead. Strange animated effect. And I can't find the reason for this strange behaviour. Can anybody explain to me why s it and what can I do? I'm not sure, but maybe it will help: slider uses Zepto js instead of regular jQuery.

Answer 1

It sounds like you have css transitions active on the .btn element. That would cause the background image to transition over with a sliding effect.

Try adding the following css to the element:

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

Beware that this may have unintended consequences if any other part of your code relies on transitions being active.

See here for more information http://www.w3.org/TR/css3-transitions/#transition-shorthand-property

Answer 2

Try for example this:

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