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

由于某些原因，当页面加载时，我很难为

each（）

循环中的元素获取准确的高度值，但是当我在

mouseleave

上尝试完全相同的

height（）

函数时，效果很好？它应该得到description

div

的高度，并用它来确定初始位置

我认为这可能与设置高度之前需要加载的图像有关，因此

load（）

试图延迟到设置高度之后。它确实似乎使高度比没有它时大，但仍然比实际高度小。有什么想法吗

jQuery(document).ready(function() {

var total = jQuery('.portfolio-item-holder figure').length;
var numLoaded = 0;

jQuery('.portfolio-item-holder img').one('load', function() {
  numLoaded++;
  if (numLoaded == total) {

    jQuery('.portfolio-item-holder figure').each(function(e) {
      var desc = jQuery(this).find('.description').outerHeight(true);
      console.log(desc);
      jQuery(this).find('figcaption').animate( { 'bottom' : -1 * desc }, 400, 'easeInOutQuart' );
    });

  }
}).each(function(){
  if(this.complete) jQuery(this).trigger('load');
});

jQuery('.portfolio-item-holder figure').bind('mouseenter', function(e) {

  var title = jQuery(e.currentTarget).find('h3').position();
  jQuery(e.currentTarget).find('figcaption').animate( { 'bottom' : '0', 'queue' : false }, 400, 'easeInOutQuart' ); 

}).mouseleave(function(e) {
  var desc = jQuery(e.currentTarget).find('.description').outerHeight(true);

  jQuery(e.currentTarget).find('figcaption').animate( { 'bottom' : -1 * desc, 'queue' : false }, 400, 'easeInOutQuart' ); 

});

});

---

有时，当一种方法不起作用时，试着用另一种方法使它起作用。这是我的建议：

1）在CSS中，1a）将

.description

类设置为

display:none和1b）将
.portfolio item holder figcaption
类设置为
底部：0px

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

function PortfolioImageHandler() {

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

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

    }, '.portfolio-item');
}

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

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

3）实现事件处理程序：

function PortfolioImageHandler() {

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

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

    }, '.portfolio-item');
}

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事件时出现溜溜球效果：每个事件在执行
slideUp
或
slideDown
之前首先取消任何正在进行的动画。让我知道这是怎么回事；这里有两张图片显示了通过在Chrome的inspector中手动修改设置得到的结果。顺便说一句，如果你看看IE8中的站点，你的设置方式是行不通的；建议的实现应该可以正常工作



跟进：我一路都在看艾伦。浏览器上的输出是否有任何不同

尝试从DOM就绪更改为页面加载（
$（窗口）。加载（fn）
）。不幸的是，没有更改……哇，这工作非常漂亮，而且简单得多。非常感谢。一个问题：如果你在最大的视口（>1400px）中查看第一个
图
，你会看到最后有一种不平稳的运动。你在测试中注意到了吗？似乎是当
a.more
（属于
.description
的一部分）位于自己的行时。在某些情况下，它从来不会一直向上滑动（Ellen Seidman，倒数第三的
图
）。有什么想法吗？我没有注意到任何抽搐，我加了最后一个数字；看起来也不错。也许你可以加一点边距，在下面加几个像素的空白。我在“阅读更多”不可见的情况下加了一些额外的填充。奇怪的是，这是偶然发生的，当我使用特殊的放松（通过放松插件）时，这种情况似乎发生得更频繁。我想生产准备就绪。再次感谢你的帮助！我需要更多的声望点数来投票，但我会尽快投票。：）“投票需要15个声誉。”我昨天刚加入这个网站。我有11个。不知道我需要做什么才能得到15。