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>

Answer 2

你可以實現你通過獲取X元素的位置，改變元素的CSS需要的功能，你想移動到absolute定位（.try），然後設置不透明度在jQuery的動畫的回調：

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