Форум

dmitriy_88 · #1 (**permalink**) 05.09.2014, 10:40

Подскажите пожалуйста. как исправить прерывание animate при скролле страницы?

MallSerg · #2 (**permalink**) 05.09.2014, 10:49

Возможно при скроле у тебя запускается JS который блокирует(сильно затармаживает) анимацию

dmitriy_88 · #3 (**permalink**) 05.09.2014, 10:56

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

dmitriy_88 · #4 (**permalink**) 05.09.2014, 11:05

<script>
 $(document).ready(function(){
        $(window).scroll(function(){
            var bo = $(this).scrollTop();
             var a = $("#hid").css('top')
             $("#hid").html(bo);
if ( bo >= 200) {$("#hid").stop().animate({'top':'50px'},500)};
        if ( bo < 200) {$("#hid").stop().animate({'top':'-50px'},500)};
        })
    })

  </script>

MallSerg · #5 (**permalink**) 05.09.2014, 11:07

Это наверно gif анимация?
или же CSS?
или же флеш?
или же jQuery функция animate?
или же vanila JavaScript?

делаю ставку на jQuery .animate()

MallSerg · #6 (**permalink**) 05.09.2014, 11:09

Еще с пяток картинок гадалок и возможно в теме появится минимальный пример на котором воспроизводится проблема. =)

dmitriy_88 · #7 (**permalink**) 05.09.2014, 11:25

похоже прерывание из за .stop(), но если его убрать, то следующая анимация срабатывает долго

dmitriy_88 · #8 (**permalink**) 05.09.2014, 11:26

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
  margin:0;
  }
  
  #hid{
    width: 100%;
    height: 50px;
    background: #FF0000;
    opacity: 1;
    position: fixed;
	top:-50px;
	
  }
  body{
     height: 3000px;
  }

  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(document).ready(function(){
        $(window).scroll(function(){
            var bo = $(this).scrollTop();
             var a = $("#hid").css('top')
             $("#hid").html(bo);
if ( bo >= 200) {$("#hid").animate({'top':'500px'},2000)};
        if ( bo < 200) {$("#hid").animate({'top':'-500px'},2000)};
        })
    })

  </script>
</head>

<body>
   <div id="hid">

</div>


</body>

</html>

dmitriy_88 · #9 (**permalink**) 05.09.2014, 11:52

в общем проблему решил немного подругому

<script>
 $(document).ready(function(){
        $(window).scroll(function(){
            var bo = $(this).scrollTop();
            
             $("#hid").html(bo);
if ( bo >= 200) {$("#hid").slideDown(500)};
        if ( bo < 200) {$("#hid").slideUp(500)};
        })
    })

  </script>

Форум

Справочник

Discord чат

Курсы javascript