Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Последние сообщения
Ответить
1

Псевдо анимация на JavaScript

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#1
Немного раскажу о том как отжеч плавно появляющиеся объекты на JavaScript. В жабаскрипте есть пара функций для поочередного вызова других функций через какой-то промежутовремени. Как бы в цикле. Эти функции setTimeLimit() и setTimeоut().

вот пример функции. Сейчас я объясню что сдесь к чему. И как она анимирует элементы.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//стартовые значения задержки между периодами и количеством периодов
var wRight = 0;
var wLeft = 0;
var wStep = 10;
var winTimeout = 50;
//var wObj = document.getElementById('test');
//тут перебираем нужный элемент и меняем ему постепено значение прозрачности
function wiOpen(pref) {
        prefix = pref;
        var wObj = document.getElementById(pref + '_dWin');
        wObj.style.display = 'block';
        if (wStep > 9) {
                if (pref == 'sec') document.getElementById('cat_dWin').style.display = 'none';
                else document.getElementById('sec_dWin').style.display = 'none';
        }
        if (wStep > 0) {
                 wStep--;
                 wLeft += 0.1;
                
                wObj.style.opacity = wLeft;
                setTimeout("wiOpen(prefix)", winTimeout);
        } else {
                wStep = 10;
                wLeft = 0;
        }
}

Теперь как видите, нам остаеться просто вызвать эту функцию и передить ей ID элемента, который должен длавно появиться. Значение display у этого элемента есно должно быть none.

вызвать функцию для плавного отображения можно так wiOpen('Pref'), тогда ID у целевого элемента должен быть "Pref_dWin".

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

Wiper

  • Заглянувший
  • Юзер
  • 11
  • Репутация:0 
  • Предупреждения: 0 
  • Регистрация:
    6 Окт 2010
#2
Прикольно. Так же можно менять не прозрачность а ширину и высоту или что-то одно. да вообще любое свойство.

r00t_san

  • ДиЗиГнЕр
  • Пользователь
  • 169
  • Репутация:11 
  • Предупреждения: 0 
  • Регистрация:
    2 Окт 2010
#3
Второй вариант как сделать плавно появляющиеся\убирающиеся и пр. эффекты.
jQuery.
Качаем скрипт заливаем себе на сервер.
прописываем его в голову.
=fadeOut\fadeIn=
пишем к примеру
Code:
<div id='con'>Какой то контент</div>
привязываем например button:
Code:
<input type='button' id='b1' value='Убирайся' onclick='hide();'>
<input type='button' id='b2' value='Покажись' onclick='show();' style='display:none;'>

пишем функцию:
Code:
<script>
function hide()
{
$("#b1").hide('');
$("#con").fadeOut('slow');
$("#b2").fadeIn('fast');
}
function show()
{
$("#b2").hide('');
$("#con").fadeIn('slow');
$("#b1").fadeIn('fast');
}
</script>

Те же яйки только с боку меняем с fadeIn\fadeOut на slideDown\slideUp тоже смотриться неплохо
С помощью этого можно сделать постоянное динамическое появления например контента страницы при переходе.

Если где то нет чего то значит что то где то есть.

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#4
))) Админка Fapos раньше тоже была на jQuery, но я так не люблю сторонние либы что все переписал. Теперь юзается либа во много раз легче - самописная и справляется на ура. Но это потому как чисто менюшки ей рисую, а когда надо много разнообразных эфектов и заранее неизвесно какие именно понадобятся, тогда да - jQuery и Prototype в руки))

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

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)
1
Сейчас online: 55. Зарегистрированных: 2. Гостей: 53.