在盒子外面左右移动div

Question

是否可以使用JQuery从窗口外移动具有绝对位置的div从左到右或从右到左？

CSS：

s1 {
   position: absolute;
   left: -1202px;
}
s2 {
   position: absolute;
   right: -1202px;
}

JQuery的：

$("#btn").click(function() {
   $("#s1").animate({
       left:"1202px"
   },1500);
$("#s2").animate({
       right:"1202px"
   },1500);
});

Answer 1

这应该可行，但请注意您的CSS包含错误：

s1 {
   position: absolute;
   left: -1202px;
}
s2 {
   position: absolute;
   right: -1202px;
}

应该是：

#s1 {
   position: absolute;
   left: -1202px;
}
#s2 {
   position: absolute;
   right: -1202px;
}

它可能来自这里：如果你没有为元素设置一个位置（绝对，相对或固定），你就不能使用top / left / right / bottom属性。

静态位置（默认值）并不关心。

滚动条处理：如果您不希望您的用户能够滚动到您移动到窗外的元素：

body {
   overflow-x: hidden;
}

您可以将其放在body或任何包装元素上。如果需要，它将保持垂直滚动，但会删除水平滚动条。