Jquery 将 x 移动到 y 并消失

Jquery move x to y and disappear

本文关键字：消失 移动 Jquery      更新时间：2023-09-26

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

嗨，写了这个代码笔，我的元素只是采用不透明度的属性，但我无法移动它。

重要提示：所有元素都应达到目标 X，甚至是第二个和第三个。

代码笔示例 

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

更新的代码笔

这可以通过在div 中添加position:absolute来完成：

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

您可以通过

获取X元素的位置，将要移动到absolute位置的元素的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>
相关文章：