Question

I’m using the Masonry plugin to float elements on a page, and it uses the class .item to apply the Masonry effect to divs.

I’d like to apply .fadeOut and .fadeIn to multiple divs that are already Masonry .items, but since I can’t apply the same id to different divs, this is proving to be difficult.

Here’s what I’m doing now, which is not working properly:

JS:

$("#shapiro").click(function() {
      $('#container div:not(#id1)').fadeOut('fast');
      $('#id1').fadeIn('fast');
    });

HTML:

<div id="container">
    <div class="item" class="id1">some content</div>
    <div class="item" class="id1">some content</div>
    <div class="item" class="id2">some content</div>
    <div class="item" class="id2">some content</div>
</div>

I’ve tried applying multiple classes to each div, but that’s not working either.
Thanks in advance.

Answer 1

The only problem I can see here is that having multiple class="" statements might confuse browsers. You can add multiple classes by space-separating them:

<div id="container">
    <div class="item id1">some content</div>
    <div class="item id1">some content</div>
    <div class="item id2">some content</div>
    <div class="item id2">some content</div>
</div>