JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wapper">
    
    <div class="floatdiv">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSXzuEgwB8HIMizoJ6sHEljrefv99Me1qmrzqku8zFKsITSxYA1lA" alt="">
    
    </div>
    
</div>

CSS

.wapper {width:100%;height:100%;}
.floatdiv {top:100px;width:100px;height:100px;border:1px solid #ccc;position: absolute;}

JavaScript

/*浮動視覺效果測試*/


function loop (){    
   $(".floatdiv").animate({"top":"50px"},2000)
   .animate({"top":"100px"},2000);
   /* setTimeout(loop, 4000) */
   //研究：為何loop()就會有堆疊溢位的問題發生。
   setTimeout(loop(), 4000)
    
}
loop();

/*結論：
setTimeout第一個參數定義為函式定義，直接放入函式名稱才是正確的作法，
若函式定義參數後方加上括弧，會直接呼叫函式執行，可能導致無窮迴圈進而發生溢位錯誤*/