jquery - Issues with sliding rtl and ltr in IE 7 -
i have simple div sliding animation(built scratch no thrid party) works fine in ie10,ff,chrome in ie 7 doesn't work.even in ie 8 works.
html
<div class="aboutus"> <div class="margin_slide"></div> <div class="about_container">click here go content div next div , div go extreme left.</div> <div class="whatwedo_container">some content div.click here go 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); });
jsfiddle http://jsfiddle.net/squidraj/uv6q5/7/
in ie 7 div2 scrolls right left , takes position of div 1 , div goes further right.but when click div 2 div 1,the div 1 comes in it's own position div 2 doesn't go it's original position.
any please.thanks in advance.
you try this, animation function:
$('.whatwedo_container').animate({ right: -($(window).width()) }, 600);
see fiddle.
Comments
Post a Comment