2

出于某种原因，当页面加载时，我无法为循环中的元素获取准确的高度值each()，但是当我在 上尝试完全相同的height()功能时mouseleave，它工作正常。明白我的意思了吗？它应该是获取描述的高度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' ); 

});

});
4

1 回答 1

2

有时，当它不能以一种方式工作时，试着让它以另一种方式工作。这是我推荐的：

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

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) {...}

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

在此处输入图像描述

在此处输入图像描述

追问：我一路看到艾伦。浏览器上的输出有什么不同吗？

在此处输入图像描述

于 2012-09-20T00:59:39.383 回答