javascript - 仅在单击 div 内的按钮时滑动 div

Question

我正在尝试使用 JQuery 将包含一些内容的 div 向左滑动，并使右侧的那个出现在前一个的位置。

我已经让它工作了，但问题是，只有当我单击包含所有内容的 div(框)时它才会工作。 我想更改它，以便它仅在我单击那些 div(框)内的按钮时发生变化。

看看这个:https://jsfiddle.net/Msiric/g8Lne34o/1/

所以我想做的是:

$(document).ready(function () {
  $('.buttons').click(function() {
    $('.box').animate({
        left: '-125%'
    }, 500, function() {
        $('.box').css('left', '150%');
        $('.box').appendTo('#inputform');
    });
    $('.box').next().animate({
        left: '25%'
    }, 500);
  });
});

请注意 $('.buttons).onclick 而不是 $('.box').onclick。 当我这样做时，代码无法按预期工作。

谢谢

Answer 1

您需要将事件绑定(bind)到 buttons 并使用 $(this).closest(".box") 为框设置动画

演示

$(document).ready(function() {
  $('.buttons').click(function() {

    $(this).closest(".box").animate({
      left: '-125%'
    }, 500, function() {
      $(this).css('left', '150%');
      $(this).appendTo('#inputform');
    });

    $(this).closest(".box").next().animate({
      left: '25%'
    }, 500);
  });
});

#inputform {
  position: relative;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.box {
  position: absolute;
  width: 100%;
  height: 100px;
  line-height: 300px;
  font-size: 50px;
  text-align: center;
  left: 25%;
  margin-left: -25%;
}

#box1 {
  background-color: #333;
}

#box2 {
  background-color: #333;
  left: 150%;
}

#box3 {
  background-color: #333;
  left: 150%;
}

#box4 {
  background-color: #333;
  left: 150%;
}

#box5 {
  background-color: #333;
  left: 150%;
}

#requestbox {
  width: 75%;
  height: 25px;
  display: block;
  float: left;
  margin-left: 3.1%;
  border-radius: 5px;
  font-size: medium;
  line-height: 25px;
  font-weight: bold;
  transition: all 0.3s ease;
  font-family: "Helvetica";
  resize: none;
}

#requestbox:focus {
  height: 100px;
}

.forms {
  width: 75%;
  height: 25px;
  display: block;
  float: left;
  margin-left: 3.1%;
  border-radius: 5px;
  font-size: medium;
  line-height: 25px;
  font-weight: bold;
  transition: all 0.3s ease;
  font-family: "Helvetica";
  resize: none;
}

.buttons {
  display: block;
  width: 18%;
  height: 31px;
  background: linear-gradient(rgb(70, 42, 24), rgb(244, 117, 33));
  border-radius: 5px;
  font-size: medium;
  line-height: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputform">
  <div id="box1" class="box">
    <textarea placeholder="Some text" id="requestbox" class="forms"></textarea>
    <button id="next" class="buttons">Next</button>
  </div>
  <div id="box2" class="box">
    <textarea placeholder="Some text" id="setbox" class="forms"></textarea>
    <button id="set" class="buttons">Set</button>
  </div>
  <div id="box3" class="box">
    <textarea placeholder="Some text" id="attachbox" class="forms"></textarea>
    <button id="attach" class="buttons">Attach</button>
  </div>
  <div id="box4" class="box">
    <textarea placeholder="Some text" id="confirmbox" class="forms"></textarea>
    <button id="confirm" class="buttons">Confirm</button>
  </div>
  <div id="box5" class="box">
    <textarea placeholder="Some text" id="publishbox" class="forms"></textarea>
    <button id="publish" class="buttons">Publish</button>
  </div>
</div>