Question

我试图创建一个帖子滑块。我使用ajax对数据进行收费，然后我将append应用于将内容注入div（id = ajaxinserted1）。但我不想将这些数据添加到屏幕中。我希望将数据添加到屏幕之外（左：100％），这样我就可以应用CSS转换来获得幻灯片动画效果。

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

谢谢

Answer 1

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

＆＃13;

// Cache the element
var $container = $('.ajaxinserted1');

// Append the images to the container
$container.append(
	'<img src="https://www.placehold.it/100">',
	'<img src="https://www.placehold.it/100">',
	'<img src="https://www.placehold.it/100">',
	'<img src="https://www.placehold.it/100">'
)

// Store the offset value
var offsetLeft = 0;

// Loop over the images and update the offset value
$.each($container.children(), function(a, b) {
	offsetLeft = offsetLeft - b.width;
})

// Set the offset for the container
$container.css('left', offsetLeft);

// Animation
$('.ajaxinserted1').animate({
	left: "10px"
}, 500);

＆＃13;

.ajaxinserted1 {
	position: absolute;
}

.ajaxinserted1 img {
	padding: 10px;
	height: 100px;
	width: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ajaxinserted1"></div>

＆＃13;

Answer 2

如果我正确理解你的问题，你只想在现有的帖子下面添加你的帖子并设置它的样式，使其显示在屏幕外，这样它就可以滑入。所以可能会像......一样......

1）将您的新帖子HTML附加到内容div中，并在其上添加一个名为“＆post;＆post;＆＃39;

的课程”

2）使用CSS进行新职位课程......

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

3）进行CSS过渡以将其滑回屏幕并在完成后删除课程。

备注：

您可能需要以绝对像素设置left属性，例如600px，这取决于您的网页布局以及您希望从哪里滑入。

您可以考虑使用opacity:0并在转换过程中淡出

在屏幕外附加（ajax -data）（左：100％;）

2 个答案: