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> 

Answer 1

更新了codepen

這可以通過向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> 

Answer 2

您可以通過獲取X元素的位置，更改要移動到absolute定位（ .try ）的元素的css，然后在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>