X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Как заблокировать страницу на время выполнения анимации
k0ttee
k0ttee
Topic Starter сообщение 25.3.2015, 12:48; Ответить: k0ttee
Сообщение #1


Часто делая анимации или просто модальные окна надо заблокировать остальные элементы на странице.
Если с модальным окном все довольно просто, то с анимациями есть одна пикантная деталь, узнав которую я даже поднял обе брови от удивления.

Что за деталь? Да просто анимации выполняются в отдельном потоке. Это значит, что если не терпеливый пользователь будет агрессивно тыкать в кнопку... На каждом тыке будет запускаться новая анимашка и на экране образуется жуткая каша из дублей модальных окон.

Дня два сам ломал голову вопросом как заблокировать страницу на время выполнения анимации... В итоге, по-нормальному это не делается никак - только накладывать div пустышку с большим z-index. У меня свистоперделок много и блокировать при выполнении одной все остальные - раздутое по коду решение.

Если руки из попы, можно воспользоваться плагином jQuery. Но я предложу вам самописную функцию, которая в разы меньше плагина. Мой код на одной ладони как шпаргалку записать можно.

Короче код.
//Блокировка элемента:
//it = блокируемый элемент
//make = значения on или off

function locker(it,make){
    if(make=="on"){
        $(it).append('<div id="locker" style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:auto"></div>') //блочим
    }
    if(make=="off"){
        $(it+">#locker").remove() //разлочиваем
    }
}


Копипастите себе эти строки (функция должна быть выше мест ее вызова), а потом вызываете функцию.
Заблокировать можно все что угодно, хоть весь <body> хоть весь <html> :smile-thumb-up:
С селекторами ничего сложного.

Блокировка

//блокируем body (а модальное окно можно append'нуть за пределы боди)
locker("body","on")
//блокируем html (то есть вообще все нафиг залочить, чтобы кривые руки не кликали когда не следует)
locker("html","on")
//блочим по классу
locker(".class","on")
//блочим по id
locker("#id","on")


Разблокировка

Для снятия блокировки достаточно еще раз позвать замечательную функцию, но вторым аргументом будет off
//разблокируем body
locker("body","off")


Если вам нужно снять блокировку только после завершения анимации, пихайте вызов разлочки в калбак animate. Если позвать функцию просто после анимации - она сработает согласно выполнению JS-файла. Анимации идут в отдельном потоке - не забываем!
Примерчик.
locker ("#id", "on") //заблокируем
//свистим, пердим, анимируем
$("#div").animate ({
    top: "+=200px",
    left: "+=200px"
}, 5000, locker("#id", "off") //разблокируем
)


Если вы не понимаете почему я написал в блокирующем div'е значение z-index: auto вы можете заменить его цифрой типа 9999999, но лучше прочитать доки по z-index.

Итого - плагин не нужен ИМХО. :friends:

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1124 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2298 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3921 25.3.2024, 6:34
автор: Skyworker
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
23 freeax 3648 24.3.2024, 20:55
автор: Liudmila
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1943 23.3.2024, 7:41
автор: Room


 



RSS Текстовая версия Сейчас: 29.3.2024, 14:30
Дизайн