Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.02.2015, 23:08
Аватар для Sanu0074
Аспирант
Отправить личное сообщение для Sanu0074 Посмотреть профиль Найти все сообщения от Sanu0074
 
Регистрация: 16.12.2012
Сообщений: 80

Jquery animate() - полоса загрузки
Есть такой блок:
<div class="load-page"><div></div></div>

Он зафиксирован у верхнего меню страницы, стиль:
.load-page{
    display: none;
    width: 100%;
    height: 2px;
    background: #0C0C0C;
    position: fixed;
    z-index: 90000;
    top: 50px;
    & div{
        position: absolute;
        background: #00FCED;
        height: 2px;
        width: 0%;
    }
}

Сайт сёрфится с помощью history.js, при клике на ссылку посылается запрос и вызывается функция которая показывает эту полосу загрузки и плавно увеличивает размер внутреннего дива что в свою очередь эмитирует прогресс бар:
startLp: function(){
            $('.load-page').show();
            var l = $('.load-page div');
            l.stop().animate({'width':'95%'},2000,function(){
                $(this).stop().animate({'width':'98%'},15000);
            });
        }

В запросе callback рубит эту анимацию таким образом:
stopLp: function(){
            var l = $('.load-page div');
            l.stop().animate({'width':'100%'},500,function(){
                $('.load-page').hide();
                $(window).scrollTop(0);
            });
        }

Но проблема в том что анимация работает довольно криво, во-первых она срабатывает неравномерно, во вторых эта кривая анимация отображается только при загрузке первой страницы, а при остальных она появляется и тут же быстренько исчезает, а самой анимации почему-то не происходит. Почему такой косяк? Как сделать правильно?
p.s. пытался добиться что-то наподобие как на youtube.com
Ответить с цитированием
  #2 (permalink)  
Старый 28.02.2015, 23:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sanu0074,
первая анимация от 0 до 95 все остальные от 100 до 95 и 95 до 98
Ответить с цитированием
  #3 (permalink)  
Старый 28.02.2015, 23:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sanu0074,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .load-page{
    display: none;
    width: 102%;
    height: 2px;
    background: #0C0C0C;
    position: fixed;
    z-index: 90000;
    top: 50px;
    margin-left: -17px;

}
     .load-page div{
        position: absolute;
        background: #00FCED;
        height: 2px;
        width: 0%;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(window).load(function(){
       var obj = {
       startLp: function(){
            $('.load-page').css({display: 'block'})
            .find('div').stop(true,true)
            .css({width: '0%'}).animate({'width':'100%'},2000, obj.stopLp);
        },
       stopLp: function(){
                $('.load-page').css({display: 'none'});
                $(window).scrollTop(0);

        }
       } ;
       window.setInterval(obj.startLp, 5000)

});


  </script>
</head>

<body>
<div class="load-page"><div></div></div>


</body>

</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery для загрузки страницы в <div> Dr.Holerik jQuery 12 11.10.2016 17:36
jQuery UI Dialog, modal:true и белая полоса frutality jQuery 10 19.06.2013 15:52
Повернуть изображение после его загрузки (jquery) art_maestro jQuery 0 13.09.2012 21:50
Проблема с Confirm, jQuery animate в Chrome dimonrus66 jQuery 4 08.10.2011 16:54
jQuery, функция animate(), рекурсия xintrea jQuery 12 03.01.2011 12:33