0

所以我想要什么。

将有一些内容以页面为中心（水平和垂直）。用户将能够单击以加载上一个/下一个内容。此内容将使用 Ajax 动态加载。

什么时候

接下来的一切都会反过来>

为了使内容居中，我使用 jQuery，因为我不知道内容的大小。

这是我正在使用的代码：

 // Jquery, CENTER
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

$("div.item1").center(true);

为了确保它在浏览器调整大小时居中，我正在使用：

$(window).bind('resize', function() {
    var that = this;

    if (!('balancer' in that)) {
        that.balancer = setTimeout(function() {
            $("div.item1").center(true);           
            delete that.balancer;
        }, 200);
    }
});

我尝试使用此代码来执行所需的动画。到目前为止还没有运气。item1 出现了我想要的样子，但不是在正确的位置（左边：-=100 推迟）

$('.item1').animate({
    opacity: 1,
    left: '-=100'
}, 1000);

$('.item2').animate({
    opacity: 1,
    left: '+=100'
}, 1000);

我在这里设置了一个 jsfiddle 来显示我在哪里：

http://jsfiddle.net/GmRJ9/

总的来说，我对我的 jQuery 不太感兴趣，所以对我来说轻松一点，但我觉得它并不太复杂。

然而，我想将它与动态加载项目一起使用这一事实可能会导致一些问题。所以考虑到这一点，我可能应该问我是否以正确的方式处理这个问题？

任何指导将不胜感激！提前致谢，

Ĵ

4

1 回答 1

0

首先挣扎我怀疑中间的公式。但是让容器成为一个矩形（改变高度！）你会看到它正在工作。
您还看到，当去掉marginforitem1时，两个项目的位置行为相同。

所以假设JS很好，我想可能是一些CSS错误。一些隐藏的边距或填充，但将两者都设置为零显示什么。

在为开发人员工具交换浏览器之后，我重复了这些步骤并意识到这些项目似乎是相对于容器放置的。

<div class="container"></div>
<div class="item1">
    <p>item1</p>
</div>
<div class="item2">
    <p>item2</p>
</div>

答对了！

这是一个延迟 2 秒的示例。我总是很难正确设置超时。可能很高兴看到它 =) http://jsfiddle.net/3xLAD/
奇怪的是我无法margin-top通过 CSS 设置项目。这使得 div 稍微水平移动（ò.O）-> http://jsfiddle.net/9ydrQ/

于 2012-04-14T19:38:48.737 回答