Блог

• Мне нужно, чтобы он работал для всех моих элементов, под которыми ничего не должно исчезать (изображения).
• В настоящее время работает только для div.logo тега

Я предполагаю, что на данный момент причина, по которой мой <h1> элемент теперь разрешает анимацию внизу, заключается в том, что когда я получаю .top() , .left() и так далее, вы делаете это для последнего элемента в списке.

Мне нужно получить границы каждого элемента в результирующем списке.

Любая помощь будет высоко оценена

Демонстрация: http://jsfiddle.net/z9b8S /

JS:

 function displayThese(selectorString) {
    var $heading = $(selectorString);
    var h1top = $heading.position().top;
    var h1bottom = h1top   $heading.height();
    var h1left = $heading.position().left;
    var h1right = h1top   $heading.width();

    var divs = $('li').filter(function () {
        var $e = $(this);
        var top = $e.position().top;
        var bottom = top   $e.height();
        var left = $e.position().left;
        var right = left   $e.width();

        return top > h1bottom || bottom < h1top || left > h1right || right < h1left;
    });
    return divs;
}

(function fadeInDiv() {
    var divsToChange = displayThese('h1, div.logo');
    var elem = divsToChange.eq(Math.floor(Math.random() * divsToChange.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: 0.3
    });
});