0

さまざまな画像がフェードインおよびフェードアウトする効果を作成するための助けを探しています。そのため、一度に 1 つずつフェードインする 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;
}
4

1 に答える 1

0

あなたはこのようなことをしようとしていますか??

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

ジャスト・ア・トライ

于 2013-08-09T16:34:22.303 に答える