Блог

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

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

Буду признателен за любую помощь

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

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

Прежде всего, вы должны выполнить функцию fadeInDiv() в конце загрузки документа, потому что в вашем скрипте позиции вычисляются как встроенные (одинаковая верхняя и нижняя части для всех ‘li’).

С другой стороны, при получении положения и размера селектора он принимает атрибуты первого элемента. Поэтому в вашем примере она не сработает. Вам нужно передать только один элемент.

Что вам нужно сделать, так это перебирать элементы, соответствующие selectorString, фильтруя список элементов «li», которые не находятся за ними.

 function displayThese(selectorString) {
    var divs = $('li');

   // iterate through elements in selector filtering <li> elements
   $(selectorString).each( function( index, value ) {
       var $heading = $(this);
       var h1top = $heading.position().top;
       var h1bottom = h1top   $heading.height();
       var h1left = $heading.position().left;
       var h1right = h1top   $heading.width();   

     divs = divs.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 just the elements non touching the selectors
         return !(top < h1bottom amp;amp; bottom > h1top amp;amp; 
                 left < h1right amp;amp; right > h1left);
     });
 });

  return divs;
}
  

при изменении размера вы должны остановить текущую анимацию и снова запустить метод fade:

 $(window).resize(function () {    
    $('li').stop();
    $('li').css("opacity", "0.3");
    fadeInDiv();    
});
  

Вот пример этого