jquery動畫僅適用於一個元素

Question

• 該函數將圖像停下來淡入淡出。
• 現在，只適用於一個元素（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 
    }); 
}); 

Answer 1

首先你應該執行fadeInDiv（）在文件加載結束功能，因爲在你的小提琴，位置計算爲內聯（所有「李」相同的頂部和底部）。

另一方面，當獲取選擇器的位置和維度時，它取第一個元素的屬性。所以它不適用於你的例子。你只需要傳遞一個元素。

你需要做的是迭代通過匹配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 && bottom > h1top && 
       left < h1right && right > h1left); 
    }); 
}); 

    return divs; 
} 

在調整，你必須停止目前的動畫，並重新開始褪色方法：

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

這裏就是一個fiddle