JQuery使用each（）获得准确的元素高度

Question

出于某种原因，我无法在页面加载时为each()循环中的元素获取准确的高度值，但是当我在{{1}上尝试完全相同的height()函数时，它工作正常。 See what I mean？它应该是获得描述的高度mouseleave，并使用它来确定初始位置。

我认为这可能与设置高度之前需要加载的图像有关，所以div试图延迟到此之后。它确实使高度大于没有它的高度，但仍然小于实际高度。有什么想法吗？

load()

Answer 1

有时候，当它不能单向工作时，请尝试以其他方式工作。这就是我的建议：

1）在您的CSS中，1a）将.description类设置为display:none;并将1b设置为.portfolio-item-holder figcaption类为bottom:0px; < / p>

2）设置鼠标事件处理程序：

function PortfolioImageHandler() {

    $('#portfolio-item-holder').on({

          mouseenter: function () { ShowPortfolioDescription($(this)); },
          mouseleave: function () { HidePortfolioDescription($(this)); }

    }, '.portfolio-item');
}

3）实施事件处理程序：

function ShowPortfolioDescription(ThePortfolioItem) {
    ThePortfolioItem.find('.description').stop().slideDown(500);
}

function HidePortfolioDescription(ThePortfolioItem) {
    ThePortfolioItem.find('.description').stop().slideUp(200);
}

4）将代码结构更改为：

$(document).ready(function () {
  //you should only have calls to other functions, no actual implementations
  //should be coded in the document.ready function; keep the handlers out of here
  PortfolioImageHandler();
});

function PortfolioImageHandler() {...}
function ShowPortfolioDescription (ThePortfolioItem) {...}
function HidePortfolioDescription (ThePortfolioItem) {...}

这将大大减少您的代码到几行代码。请注意，.stop()函数有助于在用户反复触发mouseenter / mouseleave事件时阻止yoyo效果：每个事件在执行slideUp或slideDown之前首先取消正在进行的动画。让我知道这是如何工作的;这里有2张图片通过手动修改Chrome检查器中的设置来显示结果。顺便说一句，如果你看看IE8中的网站，你设置它的方式是行不通的;推荐的实现应该可以正常工作。

跟进：我一路看到艾伦。浏览器的输出是否有所不同？