Animate JQuery slide-in on left and slider-in on right

i would like to ask how can I add smooth slide-in animation when button is hovered? This is a working code but it does not have smooth slide in or out. THank you for your help.

<script>
$(document).ready(function(){
    
    $(".holding-btn").hover(function() {
        $(".advisory .kn--child-1.show-on-hover--1").show();
        $(".advisory .kn--child-2.hide-on-hover--1").hide();
    }, function () {
        $(".advisory .kn--child-1.show-on-hover--1").hide();
        $(".advisory .kn--child-2.hide-on-hover--1").show();
    });
});
</script>
<script>
$(document).ready(function(){
    $(".advisory-btn").hover(function() {
        $(".holding .kn--child-1.show-on-hover--2").show();
        $(".holding .kn--child-2.hide-on-hover--2").hide();
    }, function () {
        $(".holding .kn--child-1.show-on-hover--2").hide();
        $(".holding .kn--child-2.hide-on-hover--2").show();
    });
});
</script>