jquery - 向下滚动和向上滚动动画

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;
    }
});

就像现在一样，按钮只是跳转到固定位置。我意识到这是因为他们没有为动画开始设置顶部/右侧值。

我试图通过获取按钮偏移并将它们设置为顶部和左侧值来克服这个问题，但这似乎也不起作用。

有什么想法吗？

Answer 1

JQuery 的 .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.