Question

For some reason, I’m having trouble getting an accurate height value for elements in an each() loop when the page loads, but when I try the exact same height() function on mouseleave, it works fine. See what I mean? It’s supposed to be getting the height of the description div, and using that to determine the initial position.

I thought this might have to do with the images needing to load before the height was set, so the load() was an attempt to delay until after that. It does seem to make the height larger than without it, but still smaller than the actual height. Any ideas?

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' ); 

});

});

Answer 1

Sometimes, when it doesn’t work one way, try to make it work some other way. This is what I recommend:

1) In your CSS, 1a) set the .description class to display:none; and 1b) set the .portfolio-item-holder figcaption class to bottom:0px;

2) Set-up the mouse event handlers:

function PortfolioImageHandler() {

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

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

    }, '.portfolio-item');
}

3) Implement the event handlers:

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

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

4) Change your code structure to this:

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

This will considerably reduce your code down to a few lines of code. Note that the .stop() function helps prevent the yoyo effect when the user repeatedly fires the mouseenter/mouseleave events: each event first cancels any ongoing animation before doing a slideUp or slideDown. Let me know how this works; here are 2 pics showing the result by manually modifying the settings in Chrome’s inspector. BTW, if you look at the site in IE8, the way you had it setup wasn’t going to work; the recommended implementation should work fine.

Follow-up: I’m seeing Ellen all the way. Is the output on your browser any different?