Question

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

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; }

Just A try

jQuery动画，淡入淡出

1 个答案: