当某些像素进入视口时动画（Pen Bramus）

我使用以下pen by Bramus在进入视口时动画（FadeInUp）div。但是，当div完全位于视口中时，div才会开始消失。我需要的是当div是视口内的某个像素时，可以灵活地开始动画。例如，当div在视口中为100像素时，它将开始动画FadeInUp。我如何使用当前使用的代码/笔执行此操作（请参阅下面的代码）？当某些像素进入视口时动画（Pen Bramus）

这也可能与百分比？ F.E.当div在视口中的20％时动画开始？

谢谢。

jQuery(function($) { 

// Function which adds the 'animated' class to any '.animatable' in view 
var doAnimations = function() { 

// Calc current offset and get all animatables 
var offset = $(window).scrollTop() + $(window).height(), 
    $animatables = $('.animatable'); 

// Check all animatables and animate them if necessary 
$animatables.each(function(i) { 
var $animatable = $(this); 
if (($animatable.offset().top + $animatable.height() - 20) < offset) { 
$animatable.removeClass('animatable').addClass('animated'); 
     } 
}); 

}; 

// Hook doAnimations on scroll, and trigger a scroll 
$(window).on('scroll', doAnimations); 
$(window).trigger('scroll'); 

});

来源

2017-06-17 WPasman

代码中已经预见了偏移量。调整的20价值在这条线：

if (($animatable.offset().top + $animatable.height() - 20) < offset) {

您可能还需要在-标志更改为+，以满足您的需求。

来源

2017-06-22 14:32:03 Bramus

我玩过减号和加号以及数字，结果对我来说是这样的：div在视口中100％或更多时淡入，或者在我到达div之前已经淡入。我仍然在学习使用Javascript。我想要的是当div在视口中是10px时，div将开始淡入。你能向我解释这段代码中的单个元素是怎么做的，所以我明白发生了什么？另一件事：对我来说，这段代码不起作用，并在Chrome中提供错误（版本59.0.3071.109）：TypeError：$ animatables.size不是函数我使用jQuery 3.2.1。 – WPasman

我设法解决了jQuery.com上给出的错误：“.size（）方法从jQuery 1.8开始已弃用，改为使用.length属性。” – WPasman

请注意，笔是在2013年创建的，并使用jQuery 1.10 ...将其与jQuery 3.2.1一起使用，因此需要进行一些调整。 – Bramus

当某些像素进入视口时动画（Pen Bramus）

回答

相关问题