Question

我需要你们所有人的小帮助。我有一个列表，其中存在多个div。每个列表中都有3个div，每个列表的第一个div是图像。我需要淡出淡出每个列表的第一个div。

以下是我的代码。

    <input type="radio" id="control1" name="controls" checked="checked"/>
    <label for="control1"></label>
    <input type="radio" id="control2" name="controls"/>
    <label for="control2"></label>
    <input type="radio" id="control3" name="controls"/>
    <label for="control3"></label>
    <input type="radio" id="control4" name="controls"/>
    <label for="control4"></label>
    <input type="radio" id="control5" name="controls"/>
    <label for="control5"></label>
    <div  class="sliderinner">
        <ul>
             <li>
              <div id ="image1">
               <div class="description">

                    <div class="description-text">
                        <h2>Slideshow Title 3</h2>
                    </div>
                </div>
                </div>
            </li>
            <li >
               <div id ="image2">
                <div class="description">

                    <div class="description-text">
                        <h2>Laddak</h2>
                    </div>
                </div>
                </div>

            </li>
            <li>
               <div id ="image3">
                <div class="description">

                    <div class="description-text">
                        <h2>Hangouts</h2>
                    </div>
                </div>
                </div>

            </li>
            <li>
               <div id="image4">
                <div class="description">

                    <div class="description-text">
                        <h2>Birds</h2>
                    </div>
                </div>
                </div>

            </li>
            <li  >
               <div id="image5">
                <div class="description">

                    <div class="description-text">
                        <h2>Taj Mahal</h2>
                    </div>
                </div>
                </div>

            </li>
        </ul>
    </div>
</div><!--slider-->

Answer 1

<edit>

每个方框的动画+延迟增加：http://codepen.io/gc-nomade/pen/qAjod/

</edit>

这是一个例子：

div {
  animation: fdio  1s infinite;
  background:gray;
}
@keyframes fdio {
  50% {opacity:0;}
}

for：<div> text </div>

<强> DEMO

不要忘记添加vendor-prefix或使用脚本自动添加

Answer 2

<ul>            
<li>
              <div id="image1" class="abc">
               <div class="description">
                     <div class="description-text">
                        <h2>Slideshow Title 3</h2>
                    </div>
                </div>
                </div>
            </li>

            <li>
               <div id="image2" class="abc">
                <div class="description">
                     <div class="description-text">
                        <h2>Laddak</h2>
                    </div>
                </div>
                </div>
            </li>

            <li>
               <div id="image3" class="abc">
                <div class="description">
                     <div class="description-text">
                        <h2>Hangouts</h2>
                    </div>
                </div>
                </div>
            </li>
</ul>



 setInterval(function(){ $(".abc").fadeToggle("slow");},4000);

http://jsfiddle.net/x73z9/2/

Answer 3

你可以像这样使用：

li div:first-child {
  //put css code here
}

淡入淡出div的自动淡入包含在列表中

3 个答案: