Question

我有一个简单的div滑动动画（从零开始构建没有第三方）在IE10，FF，Chrome中工作正常但在IE 7中它不起作用。即使在IE 8中也可以。

HTML

<div class="aboutus">
    <div class="margin_slide"></div>
    <div class="about_container">CLick here to go to some content div which is next div and this div will go to the extreme left.</div>
    <div class="whatwedo_container">Some Content div.Click here to go to 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从右向左滚动并占据div 1的位置，div进一步向右移动。但是当我单击div 2返回div 1时，div 1返回到它自己的位置但是div 2并没有回到原来的位置。

请帮助。谢谢。

Answer 1

你可以尝试这个，为你的动画功能：

$('.whatwedo_container').animate({
        right: -($(window).width())
}, 600);

请参阅fiddle。

在IE 7中滑动rtl和ltr的问题

1 个答案: