0

我正在使用 wordpress，我们有动态侧边栏。在侧边栏中，我们有许多小部件。我想要做的是显示屏幕上可见的分区（小部件）（onload - 在页面加载后）。其他小部件将被隐藏（不透明度 0 或类似的东西），但是当我滚动时，我希望该小部件（在屏幕上不可见）以淡入淡出效果出现。

我使用此代码隐藏我所有的侧边栏块正在opacity=0加载。

我需要帮助来始终显示屏幕上可见的所有小部件，然后在滚动到其他人时产生淡入淡出效果。

    $(document).ready(function(){
tiles = $("#sidebar1 div").fadeTo(0, 0);
});
$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

滚动功能正在运行。问题是，当页面满载时，我保存所有小部件的侧边栏类的不透明度为 0（如显示：无）。我需要的是当页面加载时它将提供opacity=1给屏幕上可见的所有小部件（例如 10 个小部件中的 2 个）。然后当用户滚动时，它会以淡入淡出的效果相互显示其他小部件。

4

1 回答 1

0

提取使这些小部件可见的代码块并将其放入函数中。然后向两者添加一个处理程序，scroll并为指向该函数的“DOM 就绪”添加一个处理程序。

// Determine show or hide
function showOrHide(){$(document).ready(function(){
  $("#sidebar1 div").each(function(i) {
    var a = $(this).offset().top + $(this).height();
    var b = $(window).scrollTop() + $(window).height();
    if (a < b) $(this).fadeTo(500,1);
  });
}

// Assign to both
$(document).ready(showOrHide);
$(window).scroll(showOrHide);

现在这里有性能损失。每秒滚动几次。您不希望在 DOM 中查询这些元素并each在一秒钟内多次运行它们。为此，我将留给您搜索（在 SO 和 CodeReview 上经常询问）

于 2013-08-24T11:39:32.840 回答