Javascript Jquery随机动画'；如果坐在另一个元素下面，则不会发生这种情况

首先，很抱歉我的问题是共谋的

我有一个随机的动画，使所有的图像显示不同的不透明度。他们中的一些人坐在h1标签下面。因此，h1标记下的所有图像都不应设置动画

演示：

目前，我得到了tonly的随机函数：

(function fadeInDiv() {
    var divs = $('li');
    var elem = divs.eq(Math.floor(Math.random() * divs.length));
    if (!elem.is(':visible')) {
        elem.prev().remove();
        elem.animate({
            opacity: 1
        }, Math.floor(Math.random() * 1000), fadeInDiv);
    } else {

        elem.animate({
            opacity: (Math.random() * 1)
        }, Math.floor(Math.random() * 1000), function () {
            window.setTimeout(fadeInDiv);
        });
    }

})();

---

可能的解决方案：您可以计算出标题的水平和垂直偏移量，然后始终将其与图像的偏移量进行比较

和当前html，您需要确定第一行中有多少个li（我们称之为numFirstRow），并将div选择器更改为：

var divs = $('li:nth-child(n+numFirstRow)');

---

在此处实现：

检测图像是否位于标题下的简单方法如下：

var titleTop = $('.heading').position().top;
var divs = $('li');
var elem = divs.eq(Math.floor(Math.random() * divs.length));
var elemTop = elem.position().top;
var elemHeight = elem.height();


if (titleTop < elemTop || titleTop > elemTop + elemHeight) {
    //it's not overlapping, do the animation
} else {
    //it's overlapping
}

var titleTop=$（'.heading'）.position（）.top；
var divs=$（'li'）；
var elem=divs.eq（Math.floor（Math.random（）*divs.length））；
var elemTop=elem.position（）.top；
var elemHeight=元素高度（）；
if（titleTopelemTop+elemHeight）{
//没有重叠，做动画
}否则{
//这是重叠的
}

基本上是说“如果标题的位置小于当前元素的位置，或者如果标题的位置大于当前元素的位置+当前元素的高度，则制作动画，否则不制作”

我在这里做到了： 尽管你需要重新设计你的循环，但它应该能让你继续

---

如果您的页面有一个滚动条，并且您看到它停止工作，请尝试使用

offset（）

而不是

position（）

尝试使用

过滤器

根据与h1的相对垂直位置减少可选项目（显示高度为零）。我检查项目是否与标题重叠，并将其排除在外：

例如

var divs=$（'li'）.filter（函数（）{
var$e=$（本）；
var top=$e.position（）.top；
var bottom=顶部+e.高度（）；
返回顶部>H1底部|底部

JSFiddle：

（函数fadeInDiv（）{
//排除任何div
变量$heading=$（'标题h1'）；
var h1top=$heading.position（）.top；
变量h1bottom=h1top+$heading.height（）；
//console.log（“top=“+h1top+”bottom=“+h1bottom”）；
var divs=$（'li'）。过滤器（函数（）{
var$e=$（本）；
var top=$e.position（）.top；
var bottom=顶部+e.高度（）；
返回顶部>H1底部|底部

更新： 如果要在调整大小时删除样式（当项目从标题下移出时）

JSFiddle：

//获取应该更改的div
函数displaythes（）{
变量$heading=$（'标题h1'）；
var h1top=$heading.position（）.top；
变量h1bottom=h1top+$heading.height（）；
//console.log（“top=“+h1top+”bottom=“+h1bottom”）；
var divs=$（'li'）。过滤器（函数（）{
var$e=$（本）；
var top=$e.position（）.top；
var bottom=顶部+e.高度（）；
返回顶部>H1底部|底部

您的问题是，h1标记下面的所有图像都应该动画化，而fiddle标记下面的动画不应该发生！！对不起，伙计！在h1之下，动画不应该发生！！下面还不清楚，你是说

h1

后面的所有图像都不应该设置动画还是

h1

下面的所有图像都不应该设置动画？@King King在h1下面/后面！因此，如果h1在它们上面：）列的数量会根据窗口大小而变化。@Dave Briand你能把它放在一个提琴上吗？这个提琴也不起作用：（很抱歉-复制了错误的一个。现在可以工作了。重新加载页面，它就可以了-你可以将它绑定到一个窗口上。resize（）重新计算ul宽度。很好的评论…现在只要你提供代码：）是的，我希望我可以！不知道我要花多长时间！大约30分钟（如果你遇到和我一样的问题）：@Jonas Grumann谢谢你，伙计！非常好。重做我的循环？你知道怎么做吗？现在你回想一下if/else里面的函数。我想你应该在if/else之后再打电话。比如（它仍然不完美），我们应该先过滤

li

s。这样做将使动画变得完美。我想说我们有一个winrar；）不错的一个@TrueBlueAussie只是花了我一段时间才意识到是零高度潜水造成了我所有的问题：）没问题。（如果可以的话，我会选择绿色的勾号）：>匹配如果h1低于当前位置会发生什么？当我检查无重叠（完全高于或低于h1）时，它应该仍然有效。如果你能改变小提琴的风格，以适应你的标题，我可以保证它

var divs = $('li').filter(function () {
        var $e = $(this);
        var top = $e.position().top;
        var bottom = top + $e.height();
        return top > h1bottom || bottom < h1top;
    });

(function fadeInDiv() {
    // exclude any divs 
    var $heading = $('.heading h1');
    var h1top = $heading.position().top;
    var h1bottom = h1top + $heading.height();
    //console.log("top="+ h1top + " bottom = " + h1bottom);
    var divs = $('li').filter(function () {
        var $e = $(this);
        var top = $e.position().top;
        var bottom = top + $e.height();
        return top > h1bottom || bottom < h1top;
    });
    //console.log("Len=" + divs.length);
    var elem = divs.eq(Math.floor(Math.random() * divs.length));
    if (!elem.is(':visible')) {
        elem.prev().remove();
        elem.animate({
            opacity: 1
        }, Math.floor(Math.random() * 1000), fadeInDiv);
    } else {

        elem.animate({
            opacity: (Math.random() * 1)
        }, Math.floor(Math.random() * 1000), function () {
            window.setTimeout(fadeInDiv);
        });
    }

})();

// Get the divs that should change
function displayThese() {
    var $heading = $('.heading h1');
    var h1top = $heading.position().top;
    var h1bottom = h1top + $heading.height();
    //console.log("top="+ h1top + " bottom = " + h1bottom);
    var divs = $('li').filter(function () {
        var $e = $(this);
        var top = $e.position().top;
        var bottom = top + $e.height();
        return top > h1bottom || bottom < h1top;
    });
    return divs;
}

(function fadeInDiv() {
    // exclude any divs 
    var divs = displayThese();
    //console.log("Len=" + divs.length);
    var elem = divs.eq(Math.floor(Math.random() * divs.length));
    if (!elem.is(':visible')) {
        elem.prev().remove();
        elem.animate({
            opacity: 1
        }, Math.floor(Math.random() * 1000), fadeInDiv);
    } else {

        elem.animate({
            opacity: (Math.random() * 1)
        }, Math.floor(Math.random() * 1000), function () {
            window.setTimeout(fadeInDiv);
        });
    }

})();

$(window).resize(function () {
    // Get items that do not change    
    var divs = $('li').not(displayThese());
    divs.css({
        opacity: .3
    });
});