Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.02.2015, 11:51
Интересующийся
Отправить личное сообщение для dalexra51 Посмотреть профиль Найти все сообщения от dalexra51
 
Регистрация: 10.12.2014
Сообщений: 27

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

Сапсибо
Ответить с цитированием
  #2 (permalink)  
Старый 18.02.2015, 13:46
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,452

Сообщение от dalexra51
Подскажите идею
Как вариант...

<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0
}
html,
body {
	height: 100%;
}
#test {
	height: 0;
	overflow: hidden;
}
</style>
<script type='text/javascript'>
window.onload=function(){
	var h=$(document).height();
	$('#test').animate({height: h+'px', overflow: 'none'},10000);
};
</script>
</head>
<body> 
<div id='test'>
	<p>Плавное появление контента 
	</p>
	<p>Подскажите идею как сделать чтоб при 
		запросе старницы она появлялась плавно. то есть, например если общий фон белый - 
		то на нем просто плавно появляется все содержимое. Если бекграунд картинкой - 
		то сначала плавно появляется бекграунд, а затем на нем опять 
		же плавно появляется содержимое
	</p>
	<p>Сапсибо
	</p>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 18.02.2015, 18:43
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Может я конечно неправильно понял:
<style>
body.fade{
    opacity: 0;
}
body.appear{
    opacity: 1;
    transition: opacity 3s;
}
</style>
<body>
<script>
document.body.className = 'fade';
</script>
    <p>Плавное появление контента
    </p>
    <p>Подскажите идею как сделать чтоб при
        запросе старницы она появлялась плавно. то есть, например если общий фон белый -
        то на нем просто плавно появляется все содержимое. Если бекграунд картинкой -
        то сначала плавно появляется бекграунд, а затем на нем опять
        же плавно появляется содержимое
    </p>
    <p>Сапсибо
    </p>
<script>
setTimeout(function(){
    document.body.className = 'appear';
}, 0);
</script>
</body>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #4 (permalink)  
Старый 18.02.2015, 19:30
Интересующийся
Отправить личное сообщение для dalexra51 Посмотреть профиль Найти все сообщения от dalexra51
 
Регистрация: 10.12.2014
Сообщений: 27

Спасибо, толково
А при переходе со страницы на страницу как скрыть плавно? ТО есть плавно скрываем и плавно показываем.
а то резкий переход получится не в тему
Ответить с цитированием
  #5 (permalink)  
Старый 18.02.2015, 22:12
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,452

Сообщение от dalexra51
как скрыть плавно?
Все действия в "обратном" порядке...
Ответить с цитированием
  #6 (permalink)  
Старый 18.02.2015, 22:17
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Вообще, советую подумать - нужно ли оно вообще? Ничего кроме задержек это не дает. При аяксе еще ладно - пока скрываем старый контент - уже и новый подгрузиться успеет.
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Планое появление и плавное затухание rusbody jQuery 3 15.10.2012 14:46
Плавное исчезновение и появление изображения Surlik jQuery 9 17.03.2012 13:27
Как сделать плавное появление ? saturn Элементы интерфейса 5 12.11.2011 02:16
Плавное появление изображений при загрузке страницы Imdoode jQuery 7 28.06.2011 10:48
Плавное появление сайта... hobbystudio jQuery 8 25.11.2010 22:36