Question

我正在尝试执行此过渡操作，效果很好，但由于某种原因，一行动画（.info将不会添加info-up类）不会触发。它适用于屏幕上类的每次迭代，或者当我使用它时，它不能单独使用。

$(".full-bio").hide();

$(".inner-2").each(function(){
  $(this).hover(function(){
    $(".info",this).toggleClass("info-up");
    $(this).toggleClass("move-up");
    $(".full-bio", this).fadeToggle(1000);
  });
});

body {
  background-color: #999;
}

#jar {
  width:300px;
  height:500px;
  position: relative;
  overflow: hidden;
}

.blue {
  width: 100%;
  height: 100%;
  background-image: url("https://cdn2.hubspot.net/hubfs/2984366/V3_kiip_December2017/Images/icon-flame.svg?t=1532539767047");
  background-position: 100% center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
}

.info {
  width: 100%;
  height: 30%;
  background-color: white;
  border-top: 8px solid transparent;
  -moz-border-image: -moz-linear-gradient( 0deg, rgb(5,210,220) 0%, rgb(0,92,198) 100%);
  -webkit-border-image: -webkit-linear-gradient( 0deg, rgb(5,210,220) 0%, rgb(0,92,198) 100%);
  border-image: linear-gradient(to right, #05d2dc 0%, #005cc6 100%);
  border-image-slice: 1;
  position: absolute;
  bottom: 0;
  transform: skewY(-6deg);
  transform-origin: top left;
  transition: all 1s;
}

.info-up {
  height: 99%;
  transform: none;
  transform-origin: top left;
}

.inner {
  width: 100%;
  height:30%;
  background-color: white;
  position: absolute;
  bottom: 0;
}

.inner-2 {
  width: auto;
  height:100%;
  background-color: transparent;
  position: absolute;
  bottom: -77%;
  transition: all 1s;
  padding: 1em;
}

.move-up {
  transform: translateY(-70%);
}

.full-bio {
  padding:1em;
}

<html>
  <head>
    <script
      src="http://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>    
  </head>
  <body>
    <div id="jar">
      <div class="blue">IMG</div>
      <div class="info">&nbsp;</div>
      <div class="inner">&nbsp;</div>
      <div class="inner-2">
          <h2>Header</h2>
          <h3>Sub Title</h3>
            <p class="full-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus, dui ut auctor ultricies, mauris tellus hendrerit urna, sit amet eleifend tellus lectus et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a diam ut tortor rhoncus semper. Cras ultrices sollicitudin ornare. Integer et dui sed lacus convallis suscipit.</p>
      </div>
    </div>
    
    <div id="jar">
      <div class="blue">IMG</div>
      <div class="info">&nbsp;</div>
      <div class="inner">&nbsp;</div>
      <div class="inner-2">
          <h2>Header</h2>
          <h3>Sub Title</h3>
            <p class="full-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus, dui ut auctor ultricies, mauris tellus hendrerit urna, sit amet eleifend tellus lectus et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a diam ut tortor rhoncus semper. Cras ultrices sollicitudin ornare. Integer et dui sed lacus convallis suscipit.</p>
      </div>
    </div>
  </body>
</html>

我在做什么错了？

Answer 1

您可以使用.siblings（）选择同级元素。这里的.info类是.inner-2的兄弟。

只需将您的代码更改为此。

$(".inner-2").each(function(){
    $(this).hover(function(){
        $(this).siblings(".info").toggleClass("info-up");
        $(this).toggleClass("move-up");
        $(".full-bio", this).fadeToggle(1000);
    });
});

这是小提琴-https://jsfiddle.net/39ksah65/

Answer 2

@Jason的答案应该可以，但是我只想指出，您实际上不需要.each循环，如果省略它，代码将更好地工作：

$('.inner-2').hover(function(){ //this sets an event listener for the "hover" event for all 
                                //elements with a class="inner-2"

    $(this).siblings(".info").toggleClass("info-up");
    $(this).toggleClass("move-up");
    $(".full-bio", this).fadeToggle(1000);
});

仅在使用事件监听器（在鼠标单击，悬停等）更改元素而没有的情况下，或者在需要触发循环时，才需要使用.each当事件侦听器在其他元素上触发时。

例如，假设您要在用户按下带有class="foo"的按钮时使用id="bar"隐藏所有元素：

$('#bar').on('click', function() { // when button is pressed

  $('.foo').each(function() {
    $(this).hide(); //hide all elements with class="foo"
  });

希望这会有所帮助！ }）;

单击另一个元素时，使用.this切换类

2 个答案: