Question

I’m trying to create a simple animation in which a block of text drops down into its containing div when that div is hovered over.

I created a jsfiddle here: http://jsfiddle.net/EFhVp/1/

For some reason my code works perfectly as expected in Firefox, but not in Chrome or jsfiddle.

What’s happens in Firefox (expected): the hidden text dropping down (from the top) when I mouse over and then rising back up on mouse off the container

What happens in chrome and jfiddle: the text sort of shoots upward and then disappears on mouse off.

I suspect there’s something unexpected happening when I animate the “bottom:” property but I cannot figure it out.

Answer 1

Using the bottom property was a strange approach. I’ve converted your code to use top instead and the animation works cross-browser: http://jsfiddle.net/EFhVp/2/

$(function() {
    $(".projectgrid .entry-content").hover(function() {
        $(".projecttags", this).animate({
            top: "0px"
        }, "slow");
    }, function() {
        $(".projecttags", this).animate({
            top: "-100%"
        }, "slow");
    }
    );
});​