jquery - 带有淡入和淡出的jQuery动画

Question

寻求一些帮助来创建各种图像淡入淡出的效果。所以，我有 3 个不同的图像（分组），一次淡入一个。例如 img-a 然后 img-b 然后 img-c 和所有 3 图像显示，暂停和下一组图像开始。我想要做的效果与此类似，但不是拳击只是从位置 a 移动到 b 我想让它们分散并彼此相邻。小提琴来自这篇文章。任何帮助将非常感激。感谢你们！

HTML：

<div class="container">

<div class="js-imgFade">
    <div class="slideGroup-one">
        <img class="imgSlide-a" src="//placehold.it/200x200&text=Image 1">
        <img class="imgSlide-b" src="//placehold.it/200x200&text=Image 2">
        <img class="imgSlide-c" src="//placehold.it/200x200&text=Image 3">  
    </div> <!-- /slideGroup-one -->
    <div class="slideGroup-two">
        <img class="imgSlide-a" src="//placehold.it/200x200&text=Image 1">
        <img class="imgSlide-b" src="//placehold.it/200x200&text=Image 2">
        <img class="imgSlide-c" src="//placehold.it/200x200&text=Image 3">  
    </div> <!-- /slideGroup-two -->
</div> <!-- /js-imgFade -->

</div> <!-- /container -->

CSS：

* { margin: 0; padding: 0; }

 .container {
    margin: 0 auto;
    max-width: 1000px;
 }

 [class*="imgSlide-"] {
   background: #e1e1e1;
   border: 1px dashed #ccc;
   margin: 30px 0 0 10px;
   padding: 10px;
}

[class*="imgSlide-"]:first-child {
   margin-left: 0;
}

Answer 1

您是否正在尝试做这样的事情？

CSS变化不大

.boxa {
        position: absolute;
        width: 50px;
        height: 50px;
        left: 100px;
        top: 40px; } 
.boxb {
        position: absolute;
        width: 50px;
        height: 50px;
        left: 100px;
        top: 100px; }
 .boxc {
        position: absolute;
        width: 50px;
        height: 50px;
        left: 100px;
        top: 160px; }

试一试