2

我有一个简单的 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/

在即 7 中，div2 从右向左滚动并占据 div 1 的位置，div 向右移动。但是当我单击 div 2 以返回 div 1 时，div 1 回到它自己的位置，但 div 2不会回到原来的位置。

请提供任何帮助。在此先感谢。

4

1 回答 1

0

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

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

见小提琴。

于 2013-08-09T12:12:06.607 回答