<body>
<div>Ball-1</div>
<div>Ball-2</div>
</body>
<style>
div { width:80px; height:80px; border-radius: 50%; position:absolute; left:0;
display: flex; justify-content: center; align-items: center; }
div:nth-of-type(1) { background:rgba(0, 59, 255, 0.5); top:0px; }
div:nth-of-type(2) { background:rgba(226, 0, 255, 0.5); top:100px; }
</style>
※ 撰寫 jQuery 前得先載入 jQuery 函式庫主程式
<script>
//偵測視窗的右下角, 讓二個圓球往右下角移動
var targetLeft = $(document).width()-$('div').width(); //偵測視窗寬度-div的寬度=往右移動的目標位置
var targetTop = $(document).height()-$('div').height(); //偵測視窗高度-div的高度=往下移動的目標位置
$('div:eq(0)').animate({left:targetLeft},1000)
.animate({top:targetTop},1000);
$('div:eq(1)').animate({left:targetLeft,top:targetTop},2000);
</script>
※ 增加加減速變化前得先載入 jquery.easing 外掛程式
<script>
//偵測視窗的右下角, 讓二個圓球往右下角移動
var targetLeft = $(document).width()-$('div').width(); //偵測視窗寬度-div的寬度=往右移動的目標位置
var targetTop = $(document).height()-$('div').height(); //偵測視窗高度-div的高度=往下移動的目標位置
$('div:eq(0)').animate({left:targetLeft},1000,'easeOutBack')
.animate({top:targetTop},1000,'easeOutBack');
$('div:eq(1)').animate({left:targetLeft,top:targetTop},2000,'easeOutCirc');
</script>
<script>
//偵測視窗的右下角, 讓二個圓球往右下角移動
var targetLeft = $(document).width()-$('div').width(); //偵測視窗寬度-div的寬度=往右移動的目標位置
var targetTop = $(document).height()-$('div').height(); //偵測視窗高度-div的高度=往下移動的目標位置
$('div:eq(1)').animate({left:targetLeft,top:targetTop},2000,'easeOutCirc',function(){
$('div:eq(0)').animate({left:targetLeft},1000,'easeOutBack')
.animate({top:targetTop},1000,'easeOutBack');
});
</script>