Seeking help with smooth animation using Javascript (preferred) / JQuery (less preferred)

This is the simplest form to do it.

$w.onReady(function () {
 
    $w("#button1").onClick(() => {
        showHide()
 })

    $w("#button2").onClick(() =>{
        showHide()
 })

 const showHide = () => {
 if ($w("#box1").hidden) {
            $w("#box1").show()
            $w("#button1").hide()
            $w("#button2").show()
 } 
 else {
            $w("#box1").hide()
            $w("#button2").hide()
            $w("#button1").show()
 }
 }
})

Show and Hide (editorx.io)