将 Masonry 与其他 jQuery 效果相结合

发布于 2024-12-04 11:35:37 字数 785 浏览 0 评论 0原文

我使用 Masonry 插件在页面上浮动元素，它使用 .item 类将 Masonry 效果应用于 div。

我想将 .fadeOut 和 .fadeIn 应用于已经是 Masonry .items 的多个 div，但由于我无法应用不同的 div 具有相同的 id，这被证明是很困难的。

这是我现在正在做的事情，但无法正常工作：

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>

我尝试对每个 div 应用多个类，但这也不起作用。提前致谢。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

生生漫 2024-12-11 11:35:37

我在这里看到的唯一问题是，拥有多个 class="" 语句可能会让浏览器感到困惑。您可以通过空格分隔来添加多个类：

<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>

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>

回复收藏 0 原文

~没有更多了~