Ответить
1
Псевдо анимация на JavaScript
Отправлено: 29 Сен 2010#1
Немного раскажу о том как отжеч плавно появляющиеся объекты на JavaScript. В жабаскрипте есть пара функций для поочередного вызова других функций через какой-то промежутовремени. Как бы в цикле. Эти функции setTimeLimit() и setTimeоut().
вот пример функции. Сейчас я объясню что сдесь к чему. И как она анимирует элементы.
Теперь как видите, нам остаеться просто вызвать эту функцию и передить ей ID элемента, который должен длавно появиться. Значение display у этого элемента есно должно быть none.
вызвать функцию для плавного отображения можно так wiOpen('Pref'), тогда ID у целевого элемента должен быть "Pref_dWin".
вот пример функции. Сейчас я объясню что сдесь к чему. И как она анимирует элементы.
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".
Я горжусь тем, что создал . И люблю нашу команду)
Отправлено: 6 Окт 2010#2
Прикольно. Так же можно менять не прозрачность а ширину и высоту или что-то одно. да вообще любое свойство.
Отправлено: 6 Окт 2010#3
Второй вариант как сделать плавно появляющиеся\убирающиеся и пр. эффекты.
jQuery.
Качаем скрипт заливаем себе на сервер.
прописываем его в голову.
=fadeOut\fadeIn=
пишем к примеру
привязываем например button:
пишем функцию:
Те же яйки только с боку меняем с fadeIn\fadeOut на slideDown\slideUp тоже смотриться неплохо
С помощью этого можно сделать постоянное динамическое появления например контента страницы при переходе.
jQuery.
Качаем скрипт заливаем себе на сервер.
прописываем его в голову.
=fadeOut\fadeIn=
пишем к примеру
Code:
<div id='con'>Какой то контент</div>
Code:
<input type='button' id='b1' value='Убирайся' onclick='hide();'>
<input type='button' id='b2' value='Покажись' onclick='show();' style='display:none;'>
<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>
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 тоже смотриться неплохо
С помощью этого можно сделать постоянное динамическое появления например контента страницы при переходе.
Если где то нет чего то значит что то где то есть.
Отправлено: 6 Окт 2010#4
))) Админка Fapos раньше тоже была на jQuery, но я так не люблю сторонние либы что все переписал. Теперь юзается либа во много раз легче - самописная и справляется на ура. Но это потому как чисто менюшки ей рисую, а когда надо много разнообразных эфектов и заранее неизвесно какие именно понадобятся, тогда да - jQuery и Prototype в руки))
Хотя у самописных есть еще один плюс, например теперь можно подключить любой плагин или либу не опасаясь что будут конфликты, а если юзать какую то либу, то врядли можно будет подключить другую без танцев с бубнами.
Хотя у самописных есть еще один плюс, например теперь можно подключить любой плагин или либу не опасаясь что будут конфликты, а если юзать какую то либу, то врядли можно будет подключить другую без танцев с бубнами.
Я горжусь тем, что создал . И люблю нашу команду)
1
Зарегистрируйтесь или авторизуйтесь что бы писать
Сейчас online: 10. Зарегистрированных: 0. Гостей: 10.