Question

所以我想要的。

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

当

对于Next＆gt;

，一切都会反向发生

以我使用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一般都不太热，所以对我很轻松，但我觉得它并不太复杂。

但是，我想在动态加载项目时使用它可能会导致一些问题。因此，考虑到这一点，我应该问我是否以正确的方式接近这个？

非常感谢任何指导！提前谢谢，

Ĵ

Answer 1

首先苦苦挣扎，我怀疑中间的公式。但是把容器变成一个矩形（改变高度！），你看它正在工作另外，当您取消margin的{{1}}时，您会看到两个项目的排名相同。

所以假设JS很好我认为可能是一些CSS错误。一些隐藏的边距或填充但将两者都设置为零都没有显示出来。

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

item1

Bingo!

这是一个加了2秒延迟的例子。我总是很难设置正确的超时。可能很高兴看到它=）http://jsfiddle.net/3xLAD/
奇怪的是我无法通过CSS设置项目<div class="container"></div> <div class="item1"> <p>item1</p> </div> <div class="item2"> <p>item2</p> </div>。这使得div略微水平移动（ò.O） - ＆gt; http://jsfiddle.net/9ydrQ/

幻灯片＆amp;使用Jquery淡入和淡出中心

1 个答案: