Question

I’m trying out jQuery masonry animation examples, and managed to get a basic page working. However, the animation isn’t working.

This was very frustrating, so instead I copied the example page from the jQuery Masonry site, and started stripping it down until I could spot the difference between it and my page; to identify whatever glitch I had introduced.

Here’s a beautifully working version: http://jsfiddle.net/LittleBobbyTables/FrRbv/

Try increasing/decreasing the page and frame size, and you’ll notice that the blocks animate nicely.

Here’s my (Identical?) version, which doesn’t work: http://jsfiddle.net/LittleBobbyTables/M2K9z/

I’ve put in my own styles to the blocks, but other than that, I can’t see any difference. What could it be?

Answer 1

Using Chrome’s developer console, this error was spat out by jQuery (jquery.min.js:3):

Uncaught Error: Syntax error, unrecognized expression: ##

You have an invalid selector in the code where you apply Masonry. The triple-hash ### isn’t part of the Sizzle (CSS selector library used by jQUery) selector syntax. Instead, use a single hash to target the element by ID:

$('#container').masonry({
    itemSelector : '.item',
    columnWidth : 240,
    cornerStampSelector: '.corner-stamp',
    isAnimated: !Modernizr.csstransitions
});