I have created a basic sliding animation for a div (developed from scratch without third-party plugins) that works well in IE10, FF, and Chrome, but has issues in IE 7. It still works in IE 8 though.
HTML
<div class="aboutus">
<div class="margin_slide"></div>
<div class="about_container">Click here to navigate to the next content div, shifting this div all the way to the left.</div>
<div class="whatwedo_container">Some content here. Click to go back to the previous div.</div>
</div>
CSS
.about_container {
margin: 0px auto;
position: relative;
width: 500px;
background:#ddd;
height:300px
}
.whatwedo_container {
position: absolute;
right: -100%;
width: 300px;
background:#000;
height:300px;
color:#fff;
top:0;
}
.aboutus {
background: #20407B;
height: 400px;
margin-top: 0;
position: relative;
width: 100%;
}
.margin_slide {
margin: auto 0;
position: relative;
width: 1100px;
}
JQuery
$('.about_container').click(function () {
var $slideupto = $('.margin_slide');
var ending_right = $(window).width() - $slideupto.offset().left;
$('.about_container').animate({
right: ending_right
}, 600);
var rightpos = $(window).width() - ($(".margin_slide").offset().left + $('.whatwedo_container').outerWidth());
$('.whatwedo_container').animate({
right: rightpos
}, 800);
});
$('.whatwedo_container').click(function () {
$('.about_container').animate({
right: '0'
}, 600);
$('.whatwedo_container').animate({
right: '-100%'
}, 600);
});
Link to Jsfiddle: http://jsfiddle.net/squidraj/uv6Q5/7/
When using IE 7, the second div slides from right to left, taking the position of the first div, but fails when trying to revert back by clicking on the second div. The first div returns to its original position, while the second div does not move back.
Any assistance would be greatly appreciated. Thank you!