Форум

Sanu0074 · #1 (**permalink**) 28.02.2015, 23:08

Есть такой блок:

<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

Sanu0074,
первая анимация от 0 до 95 все остальные от 100 до 95 и 95 до 98

рони · #3 (**permalink**) 28.02.2015, 23:50

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>

Форум

Справочник

Discord чат

Курсы javascript