jQuery的計算高度和寬度，動畫內容背後

Question

• 動畫內容背後H1
• 如果H1是頂級的圖像不動畫

目前工作正常，但我需要計算h1標籤的寬度，以便在h1外面對圖像進行動畫處理。 基本上如果圖像坐在h1的寬度之外應顯示。

我希望這足夠清楚。 演示：http://jsfiddle.net/33Ec8/

JS：

// Get the divs that should change 
function displayThese() { 
    var $heading = $('h1'); 
    var h1top = $heading.position().top; 
    var h1bottom = h1top + $heading.height(); 

    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() { 
    var divs = displayThese(); 
    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 1

您只需要使用$.fn.width：

var $heading = $('h1'); 
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; 

這裏是一個小提琴：http://jsfiddle.net/33Ec8/3/

Answer 2

這是你在找什麼：

$(<element>).width() 
$(<element>).height() 

演示here。