Javascript按钮出现动画

Question

当您到达页面上的某个点时，我有一个返回顶部按钮，它工作正常，但是，当它出现时，文本在两行上，直到框完成动画显示。那么，有什么办法可以防止这种情况发生吗？我所说的动画是:btt.show('slow');

代码:

$(document).ready(function () {
    var btt = $('.back-to-top');

    btt.on('click' , function(e) {
        $('html, body').animate({
            scrollTop: 0
        }, 500);
        btt.hide('slow');
        e.preventDefault();
    });

    $(window).on('scroll', function () {
        var self = $(this),
            height = self.height(),
            top = self.scrollTop();
        if (top > 500) {
            btt.show('slow');
        } else {
            btt.hide('slow');
        }
    });
});

示例:http://codepen.io/Riggster/pen/WvNvQm

Answer 1

问题是由盒子的 width 动画引起的，我认为它可能更好地动画它的 position ，但是 - 更好 - 让我们使用CSS 动画!

$(window).on('scroll', function () {
    if ($(window).scrollTop() >= 500) {
        $(".button").addClass('show');
    } else {
        $(".button").removeClass('show');
    }
});

#wrapper { 
    width: 100%; 
    height: 2000px;
}
.button {
    position: fixed;
    bottom: 50px;
    right: -100px;
    /* You might still need prefixes here. Use as preferred. */
    transition: right 500ms;
}
.button.show {
    right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="wrapper">
  <div class="button">Here's my button!</div>
</div>

我已将您的按钮定义为默认隐藏，方法是给它一个 position right: -100px。当我们到达正确的滚动位置时，我们添加类 show 并触发由 CSS 而不是 javascript 执行的动画，因为我们有属性 的 transition 属性>right 定义 - 浏览器以这种方式完成繁重的工作。