Horizontal slide effect between two divs with JQuery

Question

I have two divs where I use a slide effect between them clicking a button, it looks like this:

 function openNav() { $(".lediv1").animate({ left: '-100%' }, { duration: 500, start: function() { $(".lediv2").show().animate({ left: '0%' }, 500); }, complete: function() { $(".lediv1").css({ "display": "none" }); } }); } function closeNav() { $(".lediv2").animate({ left: '100%' }, { duration: 500, start: function() { $(".lediv1").animate({ left: '0%' }, 500); }, complete: function() { $(".lediv1").show(); $(".lediv2").hide(); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <div class="lediv1" style="position: relative; width: 100%; left: 0px; top: 0px; right: 0px;background:#F00;float:left;"> <div> <div class="text-center">Hello Hello!</div> <div class="text-center">Hello Hello!</div> <div class="text-center">Hello Hello!</div> <button class="closebtnT" style="cursor:pointer;" onclick="openNav()"> go </button> </div> </div> <div class="lediv2" style="display:none;position: relative; width: 100%; left: 0px; top: 0px; right: 0px;background:#FF0;float:left;"> <div> <div class="text-center">I don't know why you say goodbye, I say hello!</div> <div class="text-center">I don't know why you say goodbye, I say hello!</div> <div class="text-center">I don't know why you say goodbye, I say hello!</div> <div class="text-center">I don't know why you say goodbye, I say hello!</div> <div class="text-center">I don't know why you say goodbye, I say hello!</div> <div class="text-center">I don't know why you say goodbye, I say hello!</div> <div class="text-center">I don't know why you say goodbye, I say hello!</div> <button style="cursor:pointer;" onclick="closeNav()"> back </button> </div> </div> </div> 

The problem is I want div's position looks like this, during the animation:

I added the float:left attribute in CSS but it's not working.

How can I fix it?

I'd like your help.

Answer 1

 function openNav() { $("#slideWrapper").animate({left: '-100%'}, 500); } function closeNav() { $("#slideWrapper").animate({left: '0%'}, 500); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div style="width:100%;overflow:hidden;"> <div id="slideWrapper" style="width:200%;position:relative;white-space:nowrap"> <div class="lediv1" style="width:50%;background:#F00;display:inline-block;"> <div> <div class="text-center">Hello Hello!</div> <button class="closebtnT" style="cursor:pointer;" onclick="openNav()"> go </button> </div> </div> <div class="lediv2" style="width:50%;background:#FF0;;display:inline-block;"> <div> <div class="text-center">I don't know why you say goodbye, I say hello!</div> <button style="cursor:pointer;" onclick="closeNav()"> back </button> </div> </div> </div> </div>