Изменение фона без эффекта скольжения

Я работаю над iphone, как слайдер. Это тег <input type = "range"> с кнопкой для перемещения. Когда я перемещаю кнопку до конца, изображение блокировки на кнопке должно быть изменено для разблокировки изображения. Для этого я меняю фон кнопки с изображения с иконкой замка на картинку с иконкой разблокировки (оба на одном рисунке спрайта). Как это: $ ('.btn'). CSS ({'background-position': '-62px -104px'}); Но по какой-то причине картина не просто меняется, она похожа на скользящую вправо и исчезает, а с левой стороны появляется новая картина. Странный анимированный эффект. И я не могу найти причину этого странного поведения. Может ли кто-нибудь объяснить мне, почему это так и что я могу сделать? Я не уверен, но, возможно, это поможет: слайдер использует Zepto JS вместо обычного jQuery.

0
nl ja de

2 ответы

Похоже, у вас есть css-переходы, активные в элементе .btn . Это приведет к переходу фонового изображения с помощью эффекта скольжения.

Попробуйте добавить к элементу следующий css:

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

Помните, что это может иметь непреднамеренные последствия, если какая-либо другая часть вашего кода зависит от активных переходов.

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

2
добавлено

Попробуйте, например, следующее:

$('.btn').css({'background-position': 'old position'}).hide();
$('.btn').css({'background-position': 'new position'}).show();
1
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)