使用Jquery滑动和淡入淡出中心
所以我想要的是。
页面上会有一些内容居中(水平和垂直)。用户将能够点击以加载上一位/下一位内容。此内容将使用Ajax动态加载。
什么时候
对于Next>来说，所有事情都将发生相反的情况
为了使内容居中，我使用了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);
}
});我已经尝试使用这段代码来完成所需的动画。到目前为止还没什么好消息。按我希望的方式显示，但位置不太正确(左侧：-=100 item1 it off)
$('.item1').animate({
opacity: 1,
left: '-=100'
}, 1000);
$('.item2').animate({
opacity: 1,
left: '+=100'
}, 1000);我在这里设置了一个jsfiddle来显示我所在的位置：
http://jsfiddle.net/GmRJ9/
总的来说，我对我的jQuery不是很感兴趣，所以对我不要太苛刻，但我觉得这并不是太复杂。
然而，我想将它与动态加载的项目一起使用，这一事实可能会导致一些问题。因此，考虑到这一点，我可能应该问一下，我是否以正确的方式来处理这个问题？
任何指导都将不胜感激！提前谢谢你，
J
回答 1
Stack Overflow用户
发布于 2012-04-15 03:38:49
首先，我在苦苦挣扎，我怀疑中间的公式。但是把容器做成一个矩形(改变高度！)你看它起作用了。
您还可以看到，当移除item1的margin时，这两个项目的位置行为是相同的。
所以假设JS是好的，我想可能是一些CSS错误。一些隐藏的边距或填充，但都设置为零，没有显示任何信息。
在将浏览器替换为开发人员工具后，我重复了这些步骤，并意识到这些项似乎是相对于容器放置的。
<div class="container"></div>
<div class="item1">
<p>item1</p>
</div>
<div class="item2">
<p>item2</p>
</div>Bingo!
这是一个带有2秒延迟的例子。我总是努力设置正确的超时时间。可能会很高兴看到它=) http://jsfiddle.net/3xLAD/
奇怪的是，我不能通过CSS设置项目的margin-top。这使得div在-> http://jsfiddle.net/9ydrQ/上稍微水平移动。
https://stackoverflow.com/questions/10156576
复制相似问题
腾讯云开发者
