Анимация прокрутки вниз и прокрутка вверх

Question

Я пытаюсь анимировать группу кнопок от относительного положения до фиксированной позиции на каждом прокрутке.

HTML

<div class="menu"> 
    <button class="button"></button> 
    <button class="button"></button> 
</div> 

CSS

.button { 
    display: inline-block; 
    position: relative; 
    margin: 3px; 
    height: 56px; 
    width: 56px; 

    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

.grouped { 
    z-index: 1000; 
    position: fixed; 
    top: 31px; 
    right: 20px; 
} 

JS

var scrollFlag = false; 

$(window).scroll(function() { 
    var menu = $(".menu"), 
     scrollTop = window.scrollTop; 

    if(menu.offset().top <= (scrollTop + 50)) { 
     if(scrollFlag == false) { 
      $(".menu button").each(function() { 
       var button = $(this); 

       button.addClass("grouped"); 
      }); 

      scrollFlag = true; 
     } 
    } else { 
     $("#intro div.menu button").each(function() { 
      $(this).removeClass("grouped"); 
     }); 

     scrollFlag = false; 
    } 
}); 

Как теперь кнопки просто прыгать в фиксированное положение. Я понимаю, что это связано с тем, что у них нет значений top/right для анимации.

Я попытался преодолеть это, получив смещения кнопок и установив их как верхние и левые значения, но это тоже не сработало.

Любые идеи?

Answer 1

Как насчет функции JQuery's .animate()?

Вы можете сделать что-то вроде:

$("#myButton").animate({   
    //this value would either be how far you want it to move, 
    //or the final position; I'm not sure which. 
    top: 50px; 
    left: 50px; 
}, 500); //the number here is the time in ms for the animation to play. 

Answer 2

Я не думаю, что его хорошая идея, но в любом случае

$(window).scroll(function() { 
    var menu = $(".menu"), 
     scrollTop = $(window).scrollTop(); 
    if($('.button:nth-child(1)').css('position') !== 'fixed'){ 
     if(menu.offset().top <= (scrollTop + 50)) { 
      $(".menu button").each(function() { 
       var button = $(this); 

       button.addClass("grouped"); 
      }); 
     } 
    } else { 
     if(scrollTop <= 31){ 
      $("div.menu button").each(function() { 
       $(this).removeClass("grouped"); 
      }); 
     } 
    } 
}); 

JSFIDDLE