jQuery动画图标居中，加上x像素

，可以通过以下步骤实现：

1. 首先，确保你已经引入了jQuery库，并在HTML页面中创建了一个容器元素，用于显示动画图标。
2. 使用CSS将容器元素设置为相对定位（position: relative），这样可以使得后续的绝对定位生效。
3. 创建一个图标元素，并将其添加到容器元素中。可以使用HTML的<i>标签来表示图标，同时为其添加一个类名，例如"icon"。
4. 使用CSS将图标元素设置为绝对定位（position: absolute），并设置其left和top属性为50%，这样图标元素会相对于容器元素居中显示。
5. 使用jQuery的animate()方法来实现动画效果。可以通过设置图标元素的left和top属性，加上x像素的偏移量，来改变图标的位置。

下面是一个示例代码：

HTML:

<div id="container">
  <i class="icon"></i>
</div>

CSS:

#container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: #f00;
}

JavaScript (使用jQuery):

var x = 20; // 偏移量

$(".icon").animate({
  left: "+=" + x + "px",
  top: "+=" + x + "px"
}, 1000); // 动画持续时间为1秒

在上述示例中，我们创建了一个200x200像素的容器元素，并在其中添加了一个50x50像素的图标元素。通过CSS的绝对定位和transform属性，使得图标元素居中显示。然后使用jQuery的animate()方法，将图标元素的left和top属性分别加上x像素的偏移量，实现动画效果。

对于这个问题，腾讯云提供了一些与动画相关的产品和服务，例如腾讯云移动应用分析（MTA），它可以帮助开发者分析移动应用的用户行为和性能数据，从而优化用户体验和提升应用质量。你可以通过以下链接了解更多信息：

• 腾讯云移动应用分析（MTA）

请注意，以上答案仅供参考，具体的实现方式可能因个人需求和技术选型而有所不同。