Question

h1
如果 h1 是图片的顶部，请不要动画

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

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。

jquery计算高度和宽度以及它背后的动画内容

2 个答案: