jquery - 如何在 jQuery 中添加选择器，它选择一个嵌套类而不选择不在同一个嵌套中的其余类

Question

所以我想选择一个类来在 jQuery 中设置动画，当您悬停(鼠标悬停)“ block ”类时会触发该类。页面上有这些 block 的三个副本。我如何只选择一个动画而不是同时选择所有动画？ 之前我是通过元素ID做的，可以，但是复制代码6次太繁琐了。 (鼠标悬停和鼠标移开)。我将其更改为添加 find() 但它只是停止一起工作。

$(function() {
  $(".block", this).mouseover(function() {

    $(this) find(".display-none").animate({
      opacity: "1"
    }, 300);
    $(this).find(".movable-block").animate({
      top: "2%",
      paddingBottom: "10%"
    }, 300);
    $(this).find(".images-folder").animate({
      height: "120px"
    }, 300);

  });

  $(".block", this).mouseout(function() {

    $(this) find(".display-none").animate({
      opacity: "0"
    }, 300);
    $(this).find(".movable-block").animate({
      top: "15%",
      paddingBottom: "0"
    }, 300);
    $(this).find(".images-folder").animate({
      height: "200px"
    }, 300);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="row block-cols">
    <div class="col-md-4 block" id="first-block">
      <div class="movable-block" id="movable1">
        <img class="images-folder middle-out" id="first-image" src="images/Dunce.png">
        <h3 class="middle-out" id="first-title"> <strong> Title Bar </strong> One </h3>
      </div>
      <p class="display-none" id="first-nonex">This is the paragraph that is opaque right now but will appear over hover</p>
    </div>
    <div class="col-md-4 block" id="smallerblock1">
      <div class="movable-block" id="movable2">
        <img class="images-folder middle-out" id="second-image" src="images/team.png">
        <h3 class="middle-out" id="second-title"> <strong> Title Bar </strong> Two</h3>
      </div>
      <p class="display-none" id="second-nonex">This is the paragraph that is opaque right now but will appear over hover</p>
    </div>
    <div class="col-md-4 block" id="smallerblock2">
      <div class="movable-block" id="movable3">
        <img class="images-folder middle-out" id="third-image" src="images/fast.png">
        <h3 class="middle-out" id="third-title"> <strong> Title Bar </strong> Two</h3>
      </div>
      <p class="display-none" id="third-nonex">This is the paragraph that is opaque right now but will appear over hover</p>
    </div>
  </div>
</div>

一些 HTML 代码:这是一团糟，因为到处都是一堆类和 ID，但这是我试图修复它的结果:)

Answer 1

修正了你的代码

这里缺少点，在 find 函数之前

$(this)find(".display-none").animate({opacity: "1"},300);

检查这个 fiddle

http://jsfiddle.net/f8ypa/1199/