jquery scrollTop 动画功能不起作用

Question

我已经编写了我的jQuery代码，它应该在我的元素上创建一个滚动动画的fadeIn。但是该元素不会在滚动时显示。请问有人知道我的代码可能有什么问题吗？这是我下面的代码：

$(document).ready(function() {
var windowHeight = jQuery(window).height();
var windowScrollPosTop = jQuery(window).scrollTop();
var windowScrollPosBottom = windowHeight + windowScrollPosTop;
jQuery.fn.revealOnScroll = function() {
return this.each(function() {
var objectOffset = jQuery(this).offset();
var objectOffsetTop = objectOffset.top;
if (!jQuery(this).hasClass("hidden")){
jQuery(this).css("opacity", 0).addClass("hidden");
}

if (!jQuery(this).hasClass("animation-complete")) {
if (windowScrollPosBottom > objectOffsetTop) {
jQuery(this).animate({"opacity": 1}, 
3000).addClass("animation-complete");
}
}
});
} // end function here
jQuery(window).scroll(function(){
windowHeight = jQuery(window).height();
windowScrollPosTop = jQuery(window).scrollTop();
windowScrollPosBottom = windowHeight + windowScrollPosTop;
jQuery(".tg-whychooseus").revealOnScroll();
});

Answer 1

如果您删除对"隐藏"类的引用并以这样的东西开头，您的代码似乎可以工作(尽管我会审查它的效率)(我已经内联了样式，但 css 可能更好)：

<div class="tg-whychooseus" style="opacity:0">WHY CHOOSE US ?</div>

如果您添加一个具有"display:none;"属性的".hidden"类，动画将运行，但由于该类，该元素仍然"display:none;"，这可能就是该元素不显示的原因(我猜是因为您没有给出 html 或 css)。

祝插件好运(至少考虑"节流"以避免连续触发 onScroll，并尝试确保如果所有元素都有类"动画完成"，您不会不必要地分配变量值)，我希望这有所帮助。

(ps这里有一篇关于"节流"的文章 如何限制滚动事件)

(pps 我已经重新整理了您的代码以提供不同的方法来使其工作(但我相信它可以提高效率，而且我还没有测试显示多个div 的逻辑 - 你也许可以看看)。我建议浏览它，并参考一些您可以找到的其他代码来尝试做同样的事情，并且没有真正的捷径，您可能需要花一些时间来理解插件有时微妙的概念。这并不总是直截了当的，而且与以往一样，通常最好从非常简单的开始并从那里开始构建。网络上有资源，但它们非常分散)。

目录：

<div class="tg-whychooseus" style="opacity:0;">WHY CHOOSE US ?</div> 

脚本(带注释)：

// Function invoked immediately
!function () {
// Put any code here for before document.ready
// When document ready
$(function () {
// Get collection of revealItems
var revealItems = $(".tg-whychooseus");
// Adjust revealItems when document.ready, before scrolling
// (Not sure why you need this - why not hard code this in to html?)
$.each(revealItems, function () {
if (!jQuery(this).hasClass("hidden")) {
jQuery(this).css("opacity", 0).addClass("hidden");
}
});
// Whenever there is a scroll event
jQuery(window).scroll(function () {
// You should consider "throttling" these events
// to kick in shortly after a scroll event has completed
// rather than continuously => logic here not checked
var windowHeight = jQuery(window).height();
var windowScrollPosTop = jQuery(window).scrollTop();
var windowScrollPosBottom = windowHeight + windowScrollPosTop;
// Iterate through the collection of revealItems
revealItems.each(function () {
if (!jQuery(this).hasClass("animation-complete")) {
// When to animate logic (not tested), and note you've incurred overhead just to get to this point for each scroll event
var objectOffset = jQuery(this).offset();
var objectOffsetTop = objectOffset.top;
if (windowScrollPosBottom > objectOffsetTop) {
if (!jQuery(this).hasClass("animation-complete")) {
// Animate
$(this).animate({
opacity: 1
}, 3000, function () {
// When animation is complete
$(this).addClass("animation-complete");
});
}
}
}
});
});
});
}();

我希望这有所帮助。