Форум

shahin · #1 (**permalink**) 22.12.2017, 12:46

Здравствуйте, использую эффект плавного перехода на страницу, получается это так: при клике на ссылку пользователь попадает на страницу где выполняется загрузка и черный фон переходит с права на лево и страница открывается, все работает но одна проблема, иногда остается сантиметр не закрытого перехода как будто переход закрылся не до конца. Можно ли как-то решить эту проблему?

$(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;
}

ksa · #2 (**permalink**) 22.12.2017, 13:37

shahin, ты умеешь делать полные тестовые примеры?

shahin · #3 (**permalink**) 22.12.2017, 13:54

Нет не умею, а что это такое?

ksa · #4 (**permalink**) 22.12.2017, 15:22

Сообщение от shahin

а что это такое?

Это полностью готовый минимальный хтмл-документ со скриптами и пр., который демонстрирует проблему.
На нем можно ее посмотреть и предложить варианты решения.

Вот один из вариантов решения - просто удали не нужные элементы после анимации. Т.о. они не будут тебе мешать на странице.

shahin · #5 (**permalink**) 22.12.2017, 16:43

<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>

Форум

Справочник

Discord чат

Курсы javascript