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

Question

Firstly sorry for the complicity of my question!

I have a random animation that makes all the images displaying with different opacity. Some of them are sitting underneath an h1 tag. So all the images underneath the h1 tag shouldn't animate.

Demo: http://jsfiddle.net/G25fT/

Currently I got tonly the random function working:

(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

Try using a filter to reduce the selectable items, based on the relative vertical positions to the h1 (the .display div has zero height). I check to see whether the items overlap the title at all and exclude them:

eg

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

})();

Update:

If you want to remove the styling on resize (when items move out from under the heading)

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

A simple way to detect if the image is under the title would be something like:

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
}

Basically it's saying "if the title's position is less than the position of the current element or if the title's position is more than the the current element position + the current element's height, do the animation, otherwise don't"

I did it here: http://jsfiddle.net/jonigiuro/G25fT/2/ You'll need to rework your loop though, but it should get you going

If your page has a scroll and you see it stops working, try using offset() instead of postition()

Answer 3

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

Answer 4

With the current html you'll need to determine how many li are in the first row (we'll call it numFirstRow) and change you div selector to this:

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

implemented it here: http://jsfiddle.net/G25fT/7/