On my page, I have three columns with a class of col-md-6. Initially, only box1 and box2 are visible. When the user clicks on the button labeled BTN, I want to display box2 and box3, smoothly transitioning all boxes to the left.
I attempted using jQuery slide, but it didn't provide the desired effect.
How can I achieve a smooth left transition for the boxes?
function btnclick() {
$("#box1").hide("slide", {
direction: "left"
}, 1000);
$("#box3").show("slide", {
direction: "left"
}, 1000);
}.box {
height: 300px;
border: black;
border-style: dotted;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</script>
<button onclick="btnclick()">BTN</button>
<div class="container-fluid">
<div class="row">
<div id="box1" class="box col-md-6">Box1</div>
<div id="box2" class="box col-md-6">Box2</div>
<div id="box3" class="box col-md-6" style="display:none;">Box3</div>
</div>
</div>