Javascript 使用jQuery UI滑入/滑出相对定位的图像

我试图在div中的图像上使用jqueryui的滑动效果。我试图使图像在页面中的剪切后滑动，为了使插入框阴影出现，我对图像使用相对定位

这使得相对定位似乎与滑动效果不起作用的原因有关

我注意到这可以工作，但不会设置过渡动画：

$images.css("left", -150);

但这并不是：

$images.show("slide", { direction: "left", distance: "150px" });

这里是否有一个简单的jQuery UI或CSS修复程序？如果有更简单的选择，我也不完全致力于使用jqueryui

我的主要目标是保持HTML的原样。如果我必须做出让步，那么我会的，但是我喜欢div中干净的图像列表，如果可以的话，我更愿意保持HTML格式

---

jQuery有自己的幻灯片效果，不使用UI。同样，你也可以使用它的动画效果来获得一些很酷的效果

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

---

如果你不介意IE 9上没有动画，一个简单的解决方案是为left属性添加css转换

.image {
  -webkit-transition: left 0.3s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
          transition: left 0.3s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

---

CSS“left”属性对相对定位的元素几乎没有作用。您可能需要尝试设置左边距的动画

$images.animate({marginLeft: '+=500px'}, 5000);

---

这真是太圆滑了。第一次单击“左”时，过渡效果不会发生。不过，如果我先单击鼠标右键，事情似乎会顺利进行。我是否应该明确地调用$images.cssleft，-150；当页面加载以解决此问题时，或者有更好的解决方案吗？转换CSS特别引用“左”。动画一开始可能使用负的“right”值，因此为“right”添加一个转换可能会使它对两个调用都起作用。您还可以在一个转换规则中定义多个属性。不幸的是，向转换添加权限不会影响第一次单击。不过没问题，显式调用$images.cssleft，0会导致这种奇怪的现象消失，我可以接受它。$images.animate{left:-150px}；这很有技巧，但我更喜欢Nate提供的CSS方法。如果我最终需要回调，我可能会重新使用这种方法！哦，我不知道+=语法。当我使用CSS方法时，我肯定会将这一点融入到代码中。谢谢

$images.animate({marginLeft: '+=500px'}, 5000);