jquery - 在某个点为滚动上的 2 个元素设置动画 [速度问题]

Question

一旦用户到达页面上的特定点，我将尝试为两个不同的图像制作动画。 我确实这样做了，但唯一的问题是当你使用触控板时，你可以看到移动元素动画非常“慢”，而当你使用鼠标滚动页面时它很好。 我还尝试将队列动画设置为 false，但这也无济于事。

如有任何帮助，我们将不胜感激。

我的代码如下:

<div class="logo-cnt">
    <div class="logo-glyph">
    <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=50%C3%9750&w=50&h=50">
    </div>
    <div class="logo-typeface">
        <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=120%C3%9750&w=120&h=50">
    </div>
</div>

<div class="lq">

</div>

jQuery :

var position = $('.lq').offset().top;
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if(y > position){
        $(".logo-typeface").stop().animate({right:50, opacity:0}, 100, "linear");
        $(".logo-glyph").stop().animate({left:63}, 100);  
    }else{
        $(".logo-typeface").stop().animate({right:0, opacity:1}, 100, "linear");
        $(".logo-glyph").stop().animate({left:0}, 100);       
      }
});

在此处查看实时版本 JSFIDDLE

Answer 1

在我看来，这似乎是浏览器在滚动时阻止了 Javascript 的执行。所以对于鼠标来说，因为它以一定的间隔滚动(每个滚动位置移动 10 y)，所以它并不明显。但对于触控板，滚动的粒度要细得多。

我想到的解决方案是使用 CSS 动画而不是 Javascript，因为它们不会被阻止。

http://jsfiddle.net/mkvz6uwu/1/

@keyframes logo-typeface-move-left {
    from {right: 0; opacity: 1;}
    to {right: 50px; opacity: 0;}
}

@keyframes logo-typeface-move-right {
    from {right: 50px; opacity: 0;}
    to {right: 0; opacity: 1;}
}

.logo-typeface-move-left {
    opacity: 0;
    right: 50px;
    animation-name: logo-typeface-move-left;
    animation-duration: .5s;
}

.logo-typeface-move-right {
    opacity: 1;
    right: 0;
    animation-name: logo-typeface-move-right;
    animation-duration: .5s;
}

@keyframes logo-glyph-move-right {
    from {left: 0;}
    to {left: 63px;}
}

@keyframes logo-glyph-move-left {
    from {left: 63px;}
    to {left: 0;}
}

.logo-glyph-move-right {
    left: 63px;
    animation-name: logo-glyph-move-right;
    animation-duration: .5s;
}

.logo-glyph-move-left {
    left: 0;
    animation-name: logo-glyph-move-left;
    animation-duration: .5s;
}

然后使用与以前相同的逻辑使用 jQuery 添加/删除类。

if (y > position) {
        $(".logo-typeface").removeClass('logo-typeface-move-right').addClass('logo-typeface-move-left');
        $(".logo-glyph").removeClass('logo-glyph-move-left').addClass('logo-glyph-move-right');
    } else {
        $(".logo-typeface").removeClass('logo-typeface-move-left').addClass('logo-typeface-move-right');
        $(".logo-glyph").removeClass('logo-glyph-move-right').addClass('logo-glyph-move-left');
    }