Сделать чтобы позиционирование менялось плавно

@vanyakilkil · Регистрация: 13.06.2012

Студворк — интернет-сервис помощи студентам

Вот пример кода

JavaScript
1
if(button == 'off'){ $('.switch').css('background-position', 'right'); }

Получается что по нажатию на елемент меняется позиционирование, как сделать чтобы происходило это же но плавно?

@Lazy_Den · 08.03.2014, 00:17

Подключите плагин jQuery Background Position и используйте метод animate():

JavaScript
1
2
3
4
5
if(button == 'off'){ 
    $('.switch').animate({
        backgroundPosition: 'right'
     }); 
}

@vanyakilkil · 08.03.2014, 00:29 **[ТС]**

Lazy_Den, а скорость указывать нужно?

Добавлено через 5 минут
Lazy_Den, да нет, не работает

@Lazy_Den · 08.03.2014, 00:48

Сообщение от vanyakilkil

Lazy_Den, да нет, не работает

Значит вы допустили ошибку или что-то не так сделали. Смотрите рабочий пример и ищите у себя недочеты.

@vanyakilkil · 08.03.2014, 00:53 **[ТС]**

Lazy_Den, там кнопка радио, а именно:

HTML5
1
2
3
4
5
6
7
8
<form action="" method="get">
 
            <fieldset class="switch">
                <label class="on">On<input type="radio" class="on_off" name="on_off" value="on"></label>
                <label class="off">Off<input type="radio" class="on_off" name="on_off" value="off" ></label>
            </fieldset>
            
            </form>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.switch{
    border:none;
    background:left no-repeat;
    width:39px;
    height:22px;
    padding:0;
    margin:0;
}
 
.on, .off{
    width:14px;
    height:19px;
    display:inline-block;
    cursor:pointer;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
 
    $('.switch').css('background', 'url("images/switch.png")');
    $('.switch').css('background-repeat', 'no-repeat');
    $('.switch').css('background-position', 'right top');
    $('.on_off').css('display','none');
    $('.on, .off').css('text-indent','-10000px');
 
    $("input[name=on_off]").change(function() {
      var button = $(this).val();
      
        if(button == 'off'){
             $('.switch').css('background-position', 'right');
        }
        if(button == 'on'){
             $('.switch').css('background-position', 'left'); 
        }   
 
   });
 
});

Это полностью рабочий он
Ну если я меняю по вашему примеру то картинка вообще не срабатывает..

@Lazy_Den · 08.03.2014, 01:11

Сообщение от vanyakilkil

Ну если я меняю по вашему примеру то картинка вообще не срабатывает..

Еще раз повторю - ошибка где-то у вас. Вот еще один пример.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('.switch').css({
    backgroundImage: 'url(images/switch.png)',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'right top'
});
$("input[name=on_off]").change(function() {
    var button = $(this).val();
    if(button == 'off'){
        $('.switch').stop().animate({
            backgroundPosition: 'right top'
        }, 1000);
    }
    if(button == 'on'){
        $('.switch').stop().animate({
            backgroundPosition: 'left top'
        }, 1000);
    }   
});

Не по теме:

Интересно, а вы всегда используете JS для того, чтоб задавать CSS-стили?

@vanyakilkil · 08.03.2014, 01:38 **[ТС]**

Lazy_Den, там js задан, ну так получилось

ТАк было изначально

Вот, посмотрите что было и что я пытаюсь сделать плавно

@Lazy_Den · 08.03.2014, 01:53

Сообщение от vanyakilkil

... что я пытаюсь сделать плавно

А вы пытались?

@vanyakilkil · 08.03.2014, 02:08 **[ТС]**

Lazy_Den, блин, спасибо, вы просто супер. Мне очень стыдно, честно. Я просто не догалался скорость ставить. Спасибо вам большое, вы мне очень помогли, я вам весьма признателен, вы лучший!

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	08.03.2014, 00:29 [ТС]
	Lazy_Den, а скорость указывать нужно? Добавлено через 5 минут Lazy_Den, да нет, не работает 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	08.03.2014, 02:08 [ТС]
	Lazy_Den, блин, спасибо, вы просто супер. Мне очень стыдно, честно. Я просто не догалался скорость ставить. Спасибо вам большое, вы мне очень помогли, я вам весьма признателен, вы лучший! 0

Сделать чтобы позиционирование менялось плавно

Решение