Плавный перезод
Здравствуйте, использую эффект плавного перехода на страницу, получается это так: при клике на ссылку пользователь попадает на страницу где выполняется загрузка и черный фон переходит с права на лево и страница открывается, все работает но одна проблема, иногда остается сантиметр не закрытого перехода как будто переход закрылся не до конца. Можно ли как-то решить эту проблему?
$(window).load(function() {
$('body:not(#top, #preloader)').hide();
$('#preloader').delay(1000).animate( {'marginLeft':'-=3000'}, 1200, 'swing');
$('body:not(#top, #preloader)').show();
});
#top {
width: 100%;
position: fixed;
z-index: 11000;
top: 0;
}
#preloader {
position: fixed;
z-index: 10000;
width: 100%;
height: 100%;
background: #000 url(ajax-loader.gif) no-repeat center center;
top: 0;
margin-top: 0;
}
|
shahin, ты умеешь делать полные тестовые примеры?
|
Нет не умею, а что это такое?
|
Цитата:
На нем можно ее посмотреть и предложить варианты решения. Вот один из вариантов решения - просто удали не нужные элементы после анимации. Т.о. они не будут тебе мешать на странице. ;) |
<link href="/styles/style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Mr+De+Haviland|Rokkitt' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/EE815C54-39CE-F649-87B6-A74F5C4EF629/main.js" charset="UTF-8"></script><script type="text/javascript">
var isMobile = {Android: function() {return navigator.userAgent.match(/Android/i);},BlackBerry: function() {return navigator.userAgent.match(/BlackBerry|BB10; Touch/i);},iOS: function() {return navigator.userAgent.match(/iPhone|iPod/i);},Opera: function() {return navigator.userAgent.match(/Opera Mini/i);},Windows: function() {return navigator.userAgent.match(/IEMobile/i);},any: function() {return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());}};if( isMobile.any() ) {document.location = "mobile/home.html";}
</script>
<script type="text/javascript" src="/core/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/core/js/almet-home-slider.js"></script>
<script type="text/javascript" src="/core/js/effects.js"></script>
<script type="text/javascript" src="/core/js/html5-shiv.js"></script>
<script type="text/javascript" src="/core/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="/core/js/checkboxes.js"></script>
<script type="text/javascript" src="/core/js/accordions.js"></script>
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2563360-43']);
_gaq.push (['_gat._anonymizeIp']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<!-- Loading animation -->
<div id="preloader"></div>
<div id="preloader-background"></div>
<!-- Top Section -->
<section id="top">
<header id="nav-container">
<div id="nav">
<div id="nav-logo">
<a href="/" title=" Intro"><img src="/styles/img/img.png" alt="Almet Logo"></a>
</div>
<nav>
<ul>
<li><a href="/home" title="Главная страница">Главная страница</a></li>
<li><a href="/about" title="О нас">О нас</a></li>
<li><a class="show-creation-familys" href="#" title="Продукции">Продукции</a></li>
<li><a href="/projects" title="Проекты">Проекты</a></li>
<li><a href="/architects" title="Архитекторам">Архитекторам</a></li>
<li><a href="/support" title="Служба поддержки">Служба поддержки</a></li>
</ul>
</nav>
</div>
</header>
</section><section>
<ul class="slides" id="slider">
<li><img src="/styles/img/sliders/home/slide01.jpg" alt=" slider 01"></li>
<li><img src="/styles/img/sliders/home/slide02.jpg" alt=" slider 02"></li>
<li><img src="/styles/img/sliders/home/slide03.jpg" alt=" slider 03"></li>
<li><img src="/styles/img/sliders/home/slide04.jpg" alt=" slider 04"></li>
<li><img src="/styles/img/sliders/home/slide05.jpg" alt=" slider 05"></li>
</ul>
</section>
|
| Часовой пояс GMT +3, время: 14:05. |