Нужно чтобы клик срабатывал плавно, не сразу

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

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

Javascript

$(function() {
    $("#mydiv").css('background');
        $("#mydiv").click(function(){
            $("#mydiv").show(function(){
                $(this).toggleClass('ok', '8000');
            });
        });
 
});

Я тут попробовал написать, видимо где-то ошибся, надеюсь хоть близко к правильному?

@Lazy_Den · 03.03.2014, 21:22

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

надеюсь хоть близко к правильному?

Опишите, какой результат вы ожидаете, тогда можно будет говорить о степени правильности.

@vanyakilkil · 03.03.2014, 21:25 **[ТС]**

Lazy_Den, ну смотрите, до это просто была такая функция:

Javascript

$(function() {
        $("#mydiv").click(function(){
                $(this).toggleClass('ok');
        });
 
});

CSS

.ok {
    background: red;
    margin: 0 auto;
}

То-бишь при нажатии этот блок перескакивал в центр экрана и при нажатии еще раз возвращался назад.
А нужно чтобы он не резко перескакивал а плавно, вот поэтому и решил дописать еще одну функцию, я про нее прочитал, но еще не полностью понял как использовать правильно. Я только начинаю учить jquery

@Lazy_Den · 03.03.2014, 21:50

Вариант первый: подключить jQuery UI. Тогда методы переключения классов, можно делать с анимацией. Пример

Javascript

$(function() {
    $("#mydiv").click(function(){
        $(this).toggleClass('ok', 1000);
    }); 
});

Плюсы - пишем минимум кода, но за счет UI страницу утяжеляем.
Вариант второй: используем метод animate(). Плюсы - не грузим страницу дополнительными скриптами, но с расчетами для правильного позиционирования, придется помучатся, т.к. значение "auto" - не принимается.
Если UI вы уже используете, то можно остановить на первом варианте, но если нет, то советую второй способ, который будет вам еще и хорошей тренировкой.

Добавлено через 3 минуты
P.S. Кстати, toggleClass() с анимацией UI, работает не во всех браузерах корректно.

@vanyakilkil · 03.03.2014, 21:54 **[ТС]**

Lazy_Den,

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

Кстати, toggleClass() с анимацией UI, работает не во всех браузерах.

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

Javascript

$(function() {
        $("#mydiv").click(function(){
            $("#mydiv").animate(function(){
                $(this).toggleClass('ok', '8000');
            });
        });
 
});

@Lazy_Den · 03.03.2014, 21:58

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

То-бишь ui это не кроссбраузерный вариант

Кроссбраузерный, только вот проблемы возникают с некоторыми свойствами CSS. В данном случае, опять же со свойством margin и значением auto.

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

Только я не понял одно, как это все правильно сделать?

А вот тут и есть сложность. Вам надо высчитывать математически, на какую позицию должен быть смещен элемент.

@vanyakilkil · 03.03.2014, 22:00 **[ТС]**

Lazy_Den, мне с ui вариант нравится, но интересно было бы и без него понять как это делать, вы бы не могли пример любой показать бы??

@Lazy_Den · 03.03.2014, 22:10

И еще! Возьмите себе за привычку, как только видите новый метод, так сразу бегом на официальный сайт и изучаем синтаксис, смотрим примеры и т.д.

Добавлено через 8 минут

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

вы бы не могли пример любой показать бы?

Могу. Вот простейший пример, где для задания значений свойствам, используем математические операции.

Javascript

$(function() {
    var posTop = 0,
        counter = 0;
    $("#mydiv").click(function(){
        // расчеты для left и top - идентичны, просто показываю разный подход
        $(this).animate({
            left: $(this).offset().left + 50,
            top: '+=50'
        },500);
    }); 
});

@vanyakilkil · 03.03.2014, 22:11 **[ТС]**

Lazy_Den, а скажите пожалуйста, вы jquery как изучали? Мне просто реально трудно найти нормальный материал, проще брать и делать, можете посоветовать как вы изучали это все?

@Lazy_Den · 03.03.2014, 22:16

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

вы jquery как изучали? .... можете посоветовать как вы изучали это все?

Если бы вы начали изучение с нативного JS, ну хотя бы все его основы прошли, то у вас вопросов, связанных с jQuery, возникало бы в сотни раз меньше. Это всё равно, что пытаться писать используя какой-нибудь php-фреймворк, но не иметь понятия о самом языке.

@vanyakilkil · 03.03.2014, 22:18 **[ТС]**

Lazy_Den, та да, вы правы, я понимаю, но тоже мало информации нахожу полезной, я так же и HTML/CSS учил, в основном брал и верстал

) Нужно наверное и правда на js упор сделать

Добавлено через 33 секунды
Lazy_Den, а вы что лично посоветуете, и как именно вы учили?

@Lazy_Den · 03.03.2014, 22:24

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

а вы что лично посоветуете, и как именно вы учили?

У меня случай тяжелый

Я начинал учить в то время, когда было очень мало информации по сравнению с тем, что есть сегодня. Какая литература актуальна сейчас, я не особо слежу. Для меня основным источником апдейтов моих знаний, остаются официальные сайты, справочники, документация, в общем, всё, что принято называть "мануалами" ))

@vanyakilkil · 03.03.2014, 22:34 **[ТС]**

Lazy_Den, ясно, короче и всего по немногу, я тоже так практически

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	03.03.2014, 21:22	2
	Сообщение от vanyakilkil надеюсь хоть близко к правильному? Опишите, какой результат вы ожидаете, тогда можно будет говорить о степени правильности. 1

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	03.03.2014, 21:58	6
	Сообщение от vanyakilkil То-бишь ui это не кроссбраузерный вариант Кроссбраузерный, только вот проблемы возникают с некоторыми свойствами CSS. В данном случае, опять же со свойством margin и значением auto. Сообщение от vanyakilkil Только я не понял одно, как это все правильно сделать? А вот тут и есть сложность. Вам надо высчитывать математически, на какую позицию должен быть смещен элемент. 1

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	03.03.2014, 22:00 [ТС]	7
	Lazy_Den, мне с ui вариант нравится, но интересно было бы и без него понять как это делать, вы бы не могли пример любой показать бы?? 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	03.03.2014, 22:11 [ТС]	9
	Lazy_Den, а скажите пожалуйста, вы jquery как изучали? Мне просто реально трудно найти нормальный материал, проще брать и делать, можете посоветовать как вы изучали это все? 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	03.03.2014, 22:16	10
	Сообщение от vanyakilkil вы jquery как изучали? .... можете посоветовать как вы изучали это все? Если бы вы начали изучение с нативного JS, ну хотя бы все его основы прошли, то у вас вопросов, связанных с jQuery, возникало бы в сотни раз меньше. Это всё равно, что пытаться писать используя какой-нибудь php-фреймворк, но не иметь понятия о самом языке. 1

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	03.03.2014, 22:18 [ТС]	11
	Lazy_Den, та да, вы правы, я понимаю, но тоже мало информации нахожу полезной, я так же и HTML/CSS учил, в основном брал и верстал ) Нужно наверное и правда на js упор сделать Добавлено через 33 секунды Lazy_Den, а вы что лично посоветуете, и как именно вы учили? 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	03.03.2014, 22:24	12
	Сообщение от vanyakilkil а вы что лично посоветуете, и как именно вы учили? У меня случай тяжелый Я начинал учить в то время, когда было очень мало информации по сравнению с тем, что есть сегодня. Какая литература актуальна сейчас, я не особо слежу. Для меня основным источником апдейтов моих знаний, остаются официальные сайты, справочники, документация, в общем, всё, что принято называть "мануалами" )) 1

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	03.03.2014, 22:34 [ТС]	13
	Lazy_Den, ясно, короче и всего по немногу, я тоже так практически 0

Нужно чтобы клик срабатывал плавно, не сразу

Решение