jQuery移动x到y并消失。

Question

我得到了这3个带有按钮的元素，我需要一个元素在点击后移动到目标（X）并消失。第二个提示：如何只让按下的div移动？现在所有的div都会运动。

我写了这个Codepen，我的元素只是获得了透明度的属性，但我不能移动它。

重要的是：所有的元素都应该到达目标X，包括第二个和第三个元素。

请参考以下链接查看示例： Codepen 示例

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '250px',
            opacity: '0.5'
        });
    });
});

.try {
  background: red;
  margin-bottom: 10px;
  height: 100px;
  width: 100px;
}

.target {
  font-size: 50px;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div class="target"> X</div>

<div  class="try"><button id="play">Start Animation</button></div>
<div  class="try"><button id="play">Start Animation</button></div>
<div  class="try"><button id="play">Start Animation</button></div>

- Ivan Palma

---

一个元素需要除了 static 以外的定位方式，才能设置 left 和 top 值。此外，ID 是唯一的。 - adeneo

你的问题有些令人困惑。你问如何只让点击的div移动，但最后又希望它们全部移动？你能澄清一下你要寻找的行为类型吗？ - sm1215

Answer 1

更新的CodePen

可以通过将position:absolute添加到div中来完成：

$(document).ready(function(){
  $("button").click(function(){
    var current_div = $(this).closest(".try");

    current_div.animate({
      left: '85%',
      opacity: '0.5',
      top: '0px',
      margin: '0px'
    }, 2000, function(){ 
      current_div.hide();
    });
  });
});

.try {
  background: red;
  margin-bottom: 10px;
  height: 100px;
  width: 100px;
  position: absolute;
}

.target {
  font-size: 50px;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"> X</div>

<div class="try"><button id="play">Start Animation</button></div>
<div class="try" style="margin-top:105px"><button id="play">Start Animation</button></div>
<div class="try" style="margin-top:210px"><button id="play">Start Animation</button></div>

- Zakaria Acharki

Answer 2

你可以通过获取 X 元素的位置，将你想要移动的元素的 CSS 更改为绝对定位 (.try)，然后在 jQuery 的 animate 回调中设置不透明度来实现所需的功能。

$('.play').on('click', function() {
  var clickedButton = $(this),
    parentDiv = $(this).parent('.try'),
    targetPosition = $('.target').position(),
    targetLeft = targetPosition.left,
    targetTop = targetPosition.top;

  $(parentDiv).css({
      "position": "absolute"
    })
    .animate({
      left: targetLeft,
      top: targetTop
    }, 1000, "linear", function() {
      $(this).css({
        "opacity": "0.5"
      });
    });

});

.try {
  background: red;
  margin-bottom: 10px;
  height: 100px;
  width: 100px;
}

.target {
  font-size: 50px;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="target">X</div>

<div class="try">
  <button class="play">Start Animation</button>
</div>
<div class="try">
  <button class="play">Start Animation</button>
</div>
<div class="try">
  <button class="play">Start Animation</button>
</div>

最后，您不希望使用多个相同的id，所以只需将#play更改为.play：

<div class="target"> X</div>

<div  class="try"><button class="play">Start Animation</button></div>
<div  class="try"><button class="play">Start Animation</button></div>
<div  class="try"><button class="play">Start Animation</button></div>

- wahwahwah