如果坐在另一个元素下面，Jquery随机动画不应该发生

Question

首先对于我的问题的共谋感到抱歉！

我有一个随机动画，可以让所有图像显示不同的不透明度。其中一些人坐在h1标签下面。因此，h1标签下面的所有图像都不应该动画。

演示：http://jsfiddle.net/G25fT/

目前，我已经完成了随机功能：

(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);
        });
    }

})();

Answer 1

根据与h1的相对垂直位置（filter div的高度为零），尝试使用.display减少可选项。我检查项目是否与标题重叠并排除它们：

e.g。

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

JSFiddle：http://jsfiddle.net/TrueBlueAussie/G25fT/5/

(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);
        });
    }

})();

更新

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

JSFiddle：http://jsfiddle.net/TrueBlueAussie/G25fT/11/

// 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
    });
});

Answer 2

检测图像是否在标题下的简单方法是：

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
}

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

我在这里做到了：http://jsfiddle.net/jonigiuro/G25fT/2/ 你需要重做你的循环，但它应该让你去

如果您的页面有滚动条并且您看到它停止工作，请尝试使用offset()代替postition()

Answer 3

可能的解决方案：你可以找出标题的水平和垂直偏移，然后将它一直与图像的偏移进行比较

Answer 4

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

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

在此处实施：http://jsfiddle.net/G25fT/7/