javascript - jquery 计算高度和宽度并在其背后设置动画内容

Question

• h1
背后的动画内容
• 如果 h1 位于图像的顶部，则不要设置动画

目前工作正常，但我还需要计算 h1 标签的宽度，以便为 h1 之外的图像设置动画。 基本上，如果图像位于 h1 的宽度之外，则应该显示。

我希望这已经够清楚了。 Demo.

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;

这是一个 fiddle :http://jsfiddle.net/33Ec8/3/