Javascript 在屏幕外追加（ajax-data）（左：100%；）

我正在尝试创建一个帖子滑块。我使用ajax对数据进行充电，然后应用append将内容注入div（id=ajaxinserted1）。但我不想把这些数据添加到屏幕上。我希望数据被添加到屏幕之外（左：100%），这样我就可以应用CSS转换，在屏幕上显示幻灯片动画效果

如何将（数据）附加到屏幕外的DOM中

---

谢谢

如果我正确理解了您的问题，您只需要将您的帖子附加到现有帖子下，并对其进行样式设置，使其显示在屏幕外，然后可以滑入。所以也许像

1） 将新的post HTML附加到content div中，其上有一个名为“new post”的类

2） 与CSS的新职位类

.new-post {
  position:relative;
  left:100%;
}

3） 完成CSS转换，将其滑回屏幕，并在完成后删除该类

注意事项：

• 您可能需要以绝对像素为单位设置

  left

  属性，例如

  600px

  ，这取决于页面的布局以及您希望它从何处滑入

<> >您可以考虑使用<代码>不透明度：0 并进行淡入转换，以及

---

如果我正确理解了您的问题，您只需将您的帖子附加到现有帖子下，并对其进行样式设置，使其显示在屏幕外，然后滑入即可。所以也许像

1） 将新的post HTML附加到content div中，其上有一个名为“new post”的类

2） 与CSS的新职位类

.new-post {
  position:relative;
  left:100%;
}

3） 完成CSS转换，将其滑回屏幕，并在完成后删除该类

注意事项：

• 您可能需要以绝对像素为单位设置

  left

  属性，例如

  600px

  ，这取决于页面的布局以及您希望它从何处滑入

<> >您可以考虑使用<代码>不透明度：0 并进行淡入转换，以及

---

以下代码应根据请求返回的图像宽度动态计算偏移量。解释是一致的。这也要求容器绝对定位

//缓存元素
var$container=$（'.ajaxinserted1'）；
//将图像附加到容器中
$container.append(
'',
'',
'',
''
)
//存储偏移值
var offsetLeft=0；
//在图像上循环并更新偏移值
$.each（$container.children（），函数（a，b）{
offsetLeft=offsetLeft-b.宽度；
})
//设置容器的偏移量
$container.css（'left'，offsetLeft）；
//动画
$（'.ajaxinserted1'）。设置动画({
左：“10px”
}, 500);
.ajaxinserted1{
位置：绝对位置；
}
.ajaxinserted1 img{
填充：10px；
高度：100px；
宽度：100px；
}
以下代码应根据请求返回的图像宽度动态计算偏移量。解释是一致的。这也要求容器绝对定位


//缓存元素
var$container=$（'.ajaxinserted1'）；
//将图像附加到容器中
$container.append(
'',
'',
'',
''
)
//存储偏移值
var offsetLeft=0；
//在图像上循环并更新偏移值
$.each（$container.children（），函数（a，b）{
offsetLeft=offsetLeft-b.宽度；
})
//设置容器的偏移量
$container.css（'left'，offsetLeft）；
//动画
$（'.ajaxinserted1'）。设置动画({
左：“10px”
}, 500);
.ajaxinserted1{
位置：绝对位置；
}
.ajaxinserted1 img{
填充：10px；
高度：100px；
宽度：100px；
}

谢谢，这个主意很管用。我就是这么做的$css（'left'，'-150%'）；然后制作动画（左：50%）；而且效果很好。我在iphone上测试时遇到了一些问题。它应用了$container.css（'left'，'-150%'），但是在几毫秒的时间内，它会将内容取消播放。如果这个想法行得通的话。我就是这么做的$css（'left'，'-150%'）；然后制作动画（左：50%）；而且效果很好。我在iphone上测试时遇到了一些问题。它应用$container.css（'left'，'-150%'），但在几秒钟内不播放内容