javascript - Jquery 将 x 移动到 y 并消失

Question

我得到了这 3 个带有按钮的元素，我需要一个元素移动到目标 (X) 并随着点击消失。第二个提示，我如何才能只移动 div 按下？现在所有的 div 都采用了动画。

你好，写了这个 codepen，我的元素只是采用了不透明的属性，但我不能移动它。

重要:所有元素都应该达到目标X，即使是第二个和第三个。

Codepen Example

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

Answer 1

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